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Microsoft、Windows、Windows 7、Internet Explorer は Microsoft Corporation の 米国 お よび 
各国 に お ける 商標 また は 登録 商標 で す 。 

Apple、Macintosh、Power Mac、Mac、Mac OS、Mac OS X、QuickTime は Apple 
Computer, Inc. の 米国 お よび 各国 に お ける 商標 また は 登録 商標 で す 。 

登録 商標 「3 日 で マス ター」 (第 5330381 号 ) は 、 ソ シム 株 式 会 社 が 本 商品 に 使用 する 許諾 を 得 て い ます 。 
その 他 、 本 書 に 掲載 され て いる すべ て の ブラ ンド 名 と 製品 名 、 商 標 ま た は 登録 商標 よ 、 そ れ ぞ れ 帰 属 
者 の 所 有 物 で す 。 

本 書 中 に ⑥、@⑥ 〇 、"" は 明記 し て いま せん 。 


画 本 書 は ソシム 株 式 会 社 が 出版 し た も の で 、 本 書 に 関す る 権利 、 責 任 は ソシム 株 式 会 社 が 保有 し ます 。 

田 本 書 の いか な る 部 分 に つい て も 、 ソ シム 株 式 会 社 と の 書面 に よる 事前 の 同意 な し に 、 電 気 、 機 械 、 
複写 、 録 音 、 そ の 他 の いか な る 形式 や 手段 に よっ て も 、 複 製 、 お よび 検索 シス テム へ の 保存 や 転送 
は 禁止 され て いま す 。 

田 本 書 の 内 容 は 参照 用 と し て の み 使 用 され る べき も の で あり 、 予告 な し に 変更 され る こと が あり ます 。 
また 、 ソ シム 株 式 会 社 が その 内 容 を 保証 する も の で は あり ませ ん 。 本 書 の 内 容 に 誤り や 不正 確 な 記 
述 が ある 場合 も 、 ソ シム 株 式 会 社 は その 一 切 の 責任 を 負い ませ ん 。 

一 本書 に 記載 され て いる 内 容 の 運用 に よっ て 、 い か な る 損害 が 生じ て も 、 ソ シム 株 式 会 社 お よび 著者 
は 責任 を 負い か ね ます の で 、 あ ら か じ め ご 了承 くだ さい 。 


まえ が き 1 


継続 は 力 な り 。 

何 が 新しい こと を 始め た り 、 身 に 付け た り 、 
物事 を 成し遂げ た りす る た め に は 、 

少し ずつ で も 続け る こと が 何より 大 事 。 
多く の 先 人 、 偉 人 、 成 功 者 が 異口同音 に 挙げ ば て いる コツ の 1 つ で す 。 





し か し 、 続 ける こと は 、 単 純 だ けど 難し い 。 

や り 始 め る の は 簡単 で す が 、 

毎日 コツ コツ と 続け る こと は 、 思 つう 以 上 に ハー ドル の 高い 行為 で す 。 

何 度 と な く 「3 日 坊主 」 に な っ て し まっ た 経験 を 持つ 人 は 多い の で は な いで し ょ うか が 。 


た だ 、 こ れ を 裏返し て 、 ポ ジテ ィ ブ に 考え れ ば 、 
どん な に 飽き っ ぽく て 、 根 気 の な い 人 で も 、 
「 最 低 3 日 な ら 続 けら れる 」 と も 言え ます 。 


だ っ た ら 、 そ の 3 日 の うち に 、 
必要 最低 限 の こと を マス ター し て し まえ そば いい の で は な いか ? 
この 本 は 、 そ の よう な コン セプト で 作ら れ て いま す 。 


この 本 で は 、JavaScript の 基本 的 な 文法 と 使い 方 を 
次 の よう な こと が で きる と ころ まで を 目指 し ます 。 
ゼロ か ら ご く ご く 簡 単 な JavaScript プロ グラ ム を 作れ る 


候 既 存 の JavaScript プロ グラ ム を 見 て 、 何 が 書い て ある か 、 だ いた いわ か る 
人 @ よ り 専 門 的 で 高度 な 参考 書 や 記事 を 読ん で 理解 で きる 


JavaScript と は ? 
JavaSCript は 現在 、 も っ と も 広く 使わ れ て いる プロ グラ ミン グ 言 語 の 1 つ で す 。 
私 た ち が ぶ だ ん 目 に する ほとん ご どの Web サイ ト 、Web ペー ジ で 使わ れ て いま す 。 


10 一 15 年 ぐら い 前 まで は 、JavaScript の プロ グラ ミン グ は 、 

も っ ぱら プロ グラ マ の 仕事 で し た 。 

し か し 今日 で は 、 プ ログ ラマ だ け で な く 、 

Web デザ イナ ー や Web 担当 者 も 

JavaSCript の 基礎 知識 ぐら い は 知っ て お か な く て は 仕事 に な ら な い 、 
と いう 状況 に な っ て き て いま す 。 


この 本 が 対象 と し て いる 読者 
この 本 は 、 お も に 次 の よう な お 読者 を 対象 に し て いま す 。 


人 @ 大 人 礎 的 な HTML と CSS の 知識 は ある 人 
@ プ ログ ラミ ング と いう も の を や っ た こと が な い 人 
人 @ JavaScript を 見 よう 見 まね で 触っ て きた けれ ど 、 ち ゃ ん と 勉強 し た こと は な い 人 


も ちろ ん 、 他 の プロ グラ ミン グ 言 語 で プロ グラ ミン グ を し た こと は ある けれ ど 、 
JavaSCript は 初め て 、 と いう 方 も いら っ し ゃ る か と 思い ます 。 

そつ いつ 人 に は 、 ち ょ っ こと 基 本 的 で 簡単 すぎ る か も し れ ま せん が 、 

も ちろ ん 大 歓迎 で す 。 

( 今 の た め 、 ち ょ っ と 立ち 読み し て いた だ いて 、 

簡単 すぎ る よう な ら 、 そ っ と 本 棚 に お 戻し くだ さい 。) 


あら か じ め HTML と CSS の 知識 が 必要 

JavaScript の プロ グラ ム は 、 

プロ グラ ム の 中 で HTML や CSS の ソー スコ ー ド を 操作 する こと で 、 
文字 や 画像 な どの グラ フィ カル な お 動き を 実現 し て いま す 。 

で す の で 、JavaScript で プロ グラ ム を 作成 する に は 、 

HTML の 知識 と CSS の 知識 も 必要 と な り ま す 。 


本 書 で は 、HTML と CSS に つい て は すでに 基本 的 な 知識 が ある と いつ 前 提 で 、 
JavaScript に 絞っ て 説明 を 進め て いき ます 。 


HTML や CSS が わか ら な いと いう 方 は 、 

あら か じ め 「3 日 で マス ター HTML5 & CSS3」( ソ シム 刊 ) な ど 
HTML と CSS を 解説 し て いる 本 で 、 

基本 を マス ター し て か ら 読 み 始め て くだ さい 。 


ン さ (所 着 肌 





注意 

この 本 で の 説明 に は 、 実 用 的 な サン プル は 使っ て いま せん 。 

サン プル は 、 文 法 内 容 を 理解 し て も ら つ た めこ と 割り 切っ て 、 

で きる だ け 余 計 な 要素 を そぎ 落と し た 、 ご く 短 い サ ンプ ル に し て あり ます 。 

で す の で 、 す ぐに Web サイ ト で 使え る よう お 実用 的 な サン プル で 学び た い 方 に は 、 
不向き な 本 と な っ て いま す 。 


また 、 プ ログ ラミ ング 未経験 者 に も わか りや すい よう に 、 

初心 者 の 段階 で は あま り 知 る 必要 の な い 細 か い 補 定 は 省き 、 

言葉 の 定義 に つい て は 、 で きる だ け 専 門 用 語 を 使わ か が いよ うつ に し て いま す 。 

くど いと ころ が あっ た り 、 厳 密 さ を 欠く と ころ が あっ た りす る か も し れ ま せん が 、 
そう し た 点 は 、 こ の 本 の あと で 、 別 の 詳し い 本 で し っ か り 学 習 し て くだ さい 。 


学習 時 間 の めやす 

3 日 で マス ター する と は いっ て も 、 

1 日 10 時 間 も 15 時 間 も 勉 強 す る 必要 は あり ませ ん 。 

この 本 で は 、 以 下 の よ うな 想定 で 、 分 量 の 上 限 を 設け まし た 。 
@⑯ 学 習 時 間 : 1 日 あたり 2 時 間 程 度 

@ ペ ー ジ 数 : 1 日 あたり 60 ペー ジ 以 内 





1 ペー ジ を 平均 2 分 の 速度 で 読め れ ば 、 

1 時 間 で 30 ペー ジ 、2 時 間 で 60 ペー ジ 読 め る 計算 に な り ま す 。 
1 日 2 時 間 を 3 日 間 続 ける こと で 、 

JavaScript プロ グラ ミン グ に 必要 と 思わ れる 基本 的 な 知識 を 
効率 よく マス ター で きる よう に 、 構 成 し て あり ます 。 


は じ め て JavaScript を 学ぶ 方 は も ちろ ん 、 

これ まで に 始め た こと が ある けれ ど ご 途中 で 挫折 し て し まっ た 人 も 、 
ぜひ 〇 気軽 に 始め て みて くだ さい 。 

みな さん の 出発 (また は 再 出発 ) の お 役に立て れ ば 幸い で す 。 
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人 動作 確認 用 サン プル プロ グラ ム を ダウ ン ロ ー ド する 


この 本 で 作る サン プル プロ グラ ム は 、 以 下 の URL から ダウ ン ロ ー ド で きま す 。 

サン ブル コー ド を いち いち 自分 で 入力 し な く て も 、 ブ ラウ ザ で 開け ば すぐ に 実際 の 動 
作 が 確認 で きま すし 、 自 分 で 入力 し た ファ イル が 思い どおり に 表示 され な いと き に 、 
比較 し て 確か め る こと も で きま す 。 


(サン プル プロ グラ ム の ダウ ン ロ ー ド ) 
http://Wwww.socym.co.jp/book/934/ 
※ 読 者 サポ ー ト の 「 ダ ウン ロー ド 」 よ り ダ ウン ロー ド し て くだ さい 。 


ダウ ン ロ ー ド され た 
サン プル プロ グラ ム 





ダウ ン ロ ー ド し た ファ イル は 、 通 常 「 ダ ウン ロー ド 」 フォルダ の 中 に ダウ ン ロ ー ド さ 
れ て いま す 。 解凍 し て 、 自 分 の 使い や すい フォ ル ダ (「 デ スク トッ プ 」 や 「 ド キュ メン ト ]) 
人 へ 移動 し て お いて くだ さい 。 


動作 環境 

この 本 で 示し て いる 操作 手順 や 、 ブ ラウ ザ で の 表示 例 に は 、 以 下 の 環境 を 使用 し て い 
まき 。 

・Windows 7 

・Google Chrome バー ジョ ン 35 

Windows XP や Windows Vista、Windows 8 と いっ た 他 の Windows OS や 、 
Mac OS X、 ま た Google Chrome 以外 の ブラ ウザ で は 、 操作 手順 や 画面 表示 に 多 
少 違 い が あ る 場合 が あり ます 。 
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Day 


Lesson 


プロ グラ ム 学 習 の た め の 
準備 を する 


この レッ スン で は 、JavaScript の プロ グ 
ラム を 作成 する た め に 必要 な ソフ ト の 準備 
を し ます 。 


1 JavaScript で どん な こと が 
で きる の か ? 

2 プロ グラ ム 作 成 に 必要 な ソフ ト 

ブラ ウザ を イン ス トー ル す る 

4 テキ スト エディ タ を 起動 する 


CC 


し 


-"sf JaVaSCriDt で どん な 
js 人 4 こと が で きる の か ? 


SECTION 


多く の Web サイ ト で よく 使わ れ て いる 機能 を 例 に 、 代 表 的 な 
1 JavaScript プロ グラ ム を いく つか が 紹介 し て お きま す 。 








ブラ ウザ で 動作 する プロ グラ ム を 作れ る 


JavaScript は 、 ブ ラウ ザ で 動く プロ グラ ム が 作れ る プロ グラ ミン グ 言 語 で す 。Web 
ペー ジ の 見 た 目 を 動 的 に 変化 させ た り 、 ユ ー ザ ー の マウ ス や キー の 操作 に 対応 する よう 
な 動き を 付け た りす る こと が で きま す 。 よ ぐ く 使 われ て いる 例 と し て は 、 た と えば 、 オ ー 
トコ ンプ リー ト 、 ド ロッ プ ダ ウン メニ ュー、 ス ライ ド シ ョ ー な ご ど と いっ た 機能 が あり ま 
す 。 


オー トコ ンプ リー ト 
Google の 検索 ボッ クス に 文字 を 入力 する と 、 1 文字 入力 する ご と に 、 検 索 キー 


ワー ド の 候補 が 表示 され ます 。 こ の よう な 機能 を オー トコ ンプ リー ト と いい ます が 、 
JavaSoript で 作ら れ て いる こと が 多い で す 。 


検索 キー ワー ド 候 補 が 
表示 され る 


この 画面 で は 、「 東 京 ] と 入力 する と 、 そ の 下 に 「 天 気 予 報 東京 ] 「 東 京 電力 」 「 東 京 メ 
トロ ] 「 東 京 駅 ] な どの 検索 キー ワー ド 候 補 が 表示 され て いま す 。 


珍 Google (https://www.google.co.jp/) 





と 
リ 


ひび ドロ ッ プ ダウ ン メ ニュ ー 


メニ ュー を クリ ッ ク し た り 、 マ ウス ポイ ンタ を 重ね た り し た と き に 表示 され る ドロ ッ 
プ ダ ウン メニ ュー と いう 機能 が あり ます が 、 こ れ も ま た JavaScript に よっ て 作ら れ て 
いる こと が 多い 機能 で す 。 


志 ワタ シ プ ラ ス ノ 資 生 堂 (http://Wwww.shiseido.co.jp/) 
プ HI/EIDO Te メニ ュー リス ト が 


ホー ム 』 Web BC カウ ン セ リン グ \ー テ ィ ー チ ェ ッ ク 商品 カタ ログ オン ヨ ラ 表示 され る 
の トッ > ブ La 





の お うち で 美容 相談 


の お うち で 美容 レッ スン 





@ スライドショー 


画像 を クリ ッ ク す る と 、 そ の Web ペ ー ジ の 中 で 新しい 画像 が 次 々 に 表示 され る し く 
み を スラ イド ショ ー と いい ます 。 JavaScript を 使え ば 、 こ の スラ イド ショ ー の よう な 
機能 も 実現 可能 で す 。 





朝 東京 ガス (http://Www.tokyo-gas.co.jp/) 


新しい 画像 が 次 々 に 
表示 され る 





Day 





Lesson 


っ き Se0tQ き は (rr は ぐ (cnl 1dJoSeAeT 攻 


Lesson1 プロ グ クラ ム 作 成 に 
< 必要 な ソフ ト 


JavaScript の プロ グラ ム を 作る に は 、 テ キス ト エ ディ タ と 
Web ブラ ウザ が 必要 で す 。 ど ちら も 無料 で 手 に 入り ます 。 


SECTION 





$ プ ログ ラム を 作る た め に 必要 な 2 つの ソフ ト 


JavaScript の プロ グラ ム を 作る に は 、2 つ の ソフ ト が 必要 で す 。1 つ は 、 プ ログ ラ 
ム の ソー スコ ー ド (中 身 の こ と ) を 書く た め の テ キス ト エ ディ タ 。 も う 1 つ は 、 作 っ た 
プロ グラ ム が 正しく 動く か どう か を 確か め る Web ブラ ウザ で す 。 


@$ テ キス ト エ ディ タ と は ? 


テキ スト エ ディ タ (単に エディ タ と も いう ) と は 、 文字 入力 に 特 化し た ソフ ト の こと 
で す 。Windows パ ソコ ン に は 、 最 初 か ら 「 メ モ 帳 ] と いう ソフ ト が 入っ て いま す が 、 こ 
の 「 メ モ 帳 ] は テキ スト エディ タ の 1 つ で す 。 

また 、Mac の パソ コン で あれ ば 、「 テ キス ト エ ディ ッ ト 」 と いう テキ スト エディ タ が 
入っ つて いま す 。 

テキ スト エ ディ タ に は 有料 無料 含め て 、 た くさ ん の ソフ ト が あり ます の で 、「 メ モ 帳 」 
以外 の テキ スト エディ タ を お 使い いた だ いて も か まい ませ ん 。 こ の 本 で は 、Windows 
の 「 メ モ 帳 ] を 使っ て 説明 し て いき ます 。 


「Word」 や 「 一 太郎 」 な どの ワー プロ ソフ ト は テキ ス 
ト エ ディ タ で は あり ませ ん の で 、JavaScript の プロ 
グラ ム を 書く の に は 使え ませ ん 。 


ぃ 隊 内 


人 ブラ ウザ は 動作 確認 に 使う 


Day 





ブラ ウザ は 、Web ペ ー ジ を 見 る た め の ソ フト で す が 、 同 時 に 、JavaScript を 実行 Lesson 
する た め の ソ フト で も あり ます 。 ブ ラウ ザ で JavaScripot の コー ド が 書か れ た HTML 1 
ファ イル を 開く と 、JavaScripot の プロ グラ ム も 一 緒 に 実行 され ます 。 


また 、HTML ファ イル に JavaScript ファ イル ガ が 関連 付け られ て いれ ば 、HTML ファ 


イル を 開い た と き に プロ グラ ム が 呼び 出さ れ て 実行 され ます 。 
ブラ ウザ に も 、 た くさ ん の 種類 が あり ます 。 よ く 使 われ て いる ブラ ウザ は 、 


・Internet Explorer (イン ター ネッ ト エ クス プロ ー ラ ー。 IE と 略 され る ) 
・Mozilla Firefox (モジ ラ ・ フ ァ イ ア フォ ックス 。Fx や 火 狐 と 呼ば れ た りす る ) 


・Safari (サフ ァ リ ) 
・Opera (オペ ラ ) 


・Google Chrome (グー グル クロ ム ) 


な ご で す 。 最 新 の バー ジョ ン で あれ ば 、 ご の ブラ ウザ で あっ て も 、JavaScript の プロ 
グラ ム は 問題 な く 実 行 で きま す が 、 ブ ラウ ザ に よっ て 多少 動作 が 異な る 場合 が あり ます 。 
この 本 で は 、Google Chrome を 使っ て 説明 し ます 。Google Chrome の イン スト ー 
ル 方 法 は 、 こ の あと の セク ショ ン で 説明 し ます 。 


COLUMN 


その 他 の テキ スト 
エディ タ 
代表 的 な テキ スト エ 
ディ タ に は 、 以 下 の よ 
うな ソフ ト が あり ます 
(2014/5/28 時 点 の 情 
報 )。 そ れ ぞ れ 使 い 勝手 が 
違い 、JavaScript の ソー 
スコ ー ド を 書く た め に 便 
利 な 機能 を 持つ も の も あ 
り ま す 。 こ の 本 で は メモ 
帳 で 説明 を 進め ます が 、 
お 好き な ソフ ト を 使っ て 
いた だ いて か まい ませ ん 。 


テ \ ご 党 商 SW 古 乱 褒 上 NN N 区 


っ Windows 用 テキ スト エディ タ 
〇 TeraPad (無料 ) 
http://wwwSf.biglobe.ne.jp/ tsusumu/Iibrary/tpad.html 
〇 サク ラ エ ディ タ (無料 ) 
http://sakura-editor.Sourceforge.net/ 
〇 EmEditor (4,000 円 一 ) 
http://jp.emeditor.Com/ 
〇 秀丸 エディ タ (4.320 円 ) 
http://hide.maruo.co.jp/software/hidemaru.html 
っ Mac 用 テキ スト エディ タ 
〇 mi (無料 ) 
http://Www.mimikaki.net/ 
〇 CotEditor (無料 ) 
http://coteditor.github.io/ 
〇 Jedit X (2800 円 一 ) 
http://Www.artman21.com/jp/jedit_x/ 
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Lesson1 ブラ ウザ を 
k:a』 イン スト ー ル する 


SECTION 


うつ JavaScript の プロ グラ ム を 動か す た め の ブラ ウザ と し て 、 






Google Chrome を ダウ ン ロ ー ド し て 、 イ ンス トール し ます 。 


@ ご の 本 で は Google Chrome を 使う 


Windows の パソ コン で あれ ば 、 最 初 か ら Internet Explorer と いう ブラ ウザ が 入っ 
て いま す が 、 こ の 本 で は 、Google Chrome (以下 、 Chrome と 略 ) と いう ブラ ウザ を 
使っ て 説明 し て いき ます 。 Chrome は 、Windows、OS X (Mac) 、Android、iOS な 
ど 、 複 数 の OS で 使え て 世界 的 に シェ ア が 大 きく 、 ま た JavaScript の プロ グラ ム を 作っ 
て いく うえ で 、 い ろ い ろ と 便利 な 機能 を 備え て いる か ら で す 。 


@ Chrome の 入手 方 法 


Chrome は イン ター ネッ ト か ら 無 料 で 入手 で きま す 。 ぶ ふだん お 使い の ブラ ウザ を 起 
動 し て 「Google」 や 「Yahoo!l JAPAN」 な どの 検索 サイ ト を 開き 、「 ク ロム 」 と 検索 し て 
みて くだ さい 、。 検索 結果 の 上 の 方 に 「Chrome ブラ ウザ 」 と いう 名 前 の 公式 サイ ト が 見 
つか る か と 思い ます 。 


替 Google Chrome (http://Www.google.co.jp/intl/ja/chrome/browser/) 


時 mw | Chrome の ダウ ン ロ ー ド ペー ジ 


より 速く 、 安 全 に ウェ ブ を 閲覧 


be と 仁和 に 論 








この サイ ト が か ら ダ ウン ロー ド し て 、 イン スト ー ル し て くだ きい 。 





Day 


cs 


mi テキ スト エディ タ を 
まで ィ 


SECTION 


4 JavaScript プロ グラ ム の ソー スコ ー ド (中 身 ) は 、 テ キス ト エ 








ディ タ を 使っ て 書き ます 。 こ の 本 で は 、Windows に 最初 か ら 入 
っ て いる メモ 帳 と いう テキ ス ト エ ディ タ を 使い ます 。 


人 @ メモ 帳 を 起動 する 


Chrome を イン ス トール し た ら 、 次 は メモ 帳 を 起動 し こみ まし ょ う 。 


《》 スタ ー ト ボタ ン を クリ ッ ク 
⑫ 検索 窓 に 「notepad」 と 入力 


時 リモ ー ト デス クト ッ プ 近 提 


pm 


すべ て の プロ グラ ム 


eaul 団 寅 RN ヽ 山 ロ テ せ N| 区 | 


《) 「notepad」 を クリ ッ ク 


検索 結 野 の 続き を 表示 








3psy GOAL 
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ーーーーーーーーーーーーーーーー メモ 帳 が 起動 し た 





@ HTML の ソー スコ ー ド を 入力 する 


続い て 、 起 動 し た メモ 帳 に 、 以 下 の HTML ソー スコ ー ド を 入力 し て くだ さい 。 

2 カ所 ある 「 プ ログ ラム 実行 テス ト 」 と いつ 文字 以外 は 、 す べ て 半角 文字 で 入力 し ま 
す 。 この 本 で 作る サン プル プロ グラ ム で は 、 こ の HTML ソー スコ ー ド を 使っ て いき ます 。 
一 度 入力 し て お け ば 、 こ の あと ずっ と 使い 回 し で きま す 。 


1 < く <!DOCTYPE htm1> 

2 <htm1 1ang="]a"> 

3 <head> 

4 <meta charset="ut 和 f-8"> 

5 「 <tit1e> プロ グラ ム 実 行 テ スト </tit1e> 
6 </head> 

が 

8 く <body> 

9 ! <h1> プロ グラ ム 実 行 テス ト </h1> 
10 ! </body> 

11 1 </htm1 > 


ー ae で 
ファ イル (E) 坦 集 (E) 書式 (O) 表示 (V) ヘル プ (H) 
<!DOCTYPE html> 

<html lang ja> 

<heax 


<meta charset="utf-8> 
<title> ブ ログ ラム 実行 テス ト </title> 
</hea 


<body 
<hl> ブ ログ ラム 実行 テス ト </h1> 
</body> 
Zhtml> 





ソー スコ ー ド を 入力 し た ら 、 その まま の 状態 に し て お いて くだ さい 。 次 は この HTML 
ソー スコ ー ド の 中 に 、JavaScript の プロ グラ ム を 書い て み ま す 。 







Day Lesson 





1 行 だ け の プロ グラ ム を 
作っ て みる 


この レッ スン で は 、JavaScript の 簡単 な 
プロ グラ ム を 作成 し て み ま す 。 ご この あと 何 
度 も 繰り 返す こと に な る 「 ソ ー ス コー ド を 
入力 」 一 「 プ ログ ラム を 実行 」 一 「 プ ログ 
ラム を 書き 換え 」 一 「 再 度 プ ログ ラム を 実 
行 」 と いう 一 連 の 手順 を 学び ます 。 


ソー スコ ー ド を 書く 

プロ グラ ム を 実行 する 

プロ グラ ム を 書き 換え て 実行 する 
ファ イル の 拡張 子 が 見 える よう に 
設定 する 


還っ 


むら OO DO 一 


人 


-。 . ソー スコ ー ド を 書く 


SECTION 


JavaScriDt の プロ グラ ム は 、HTML ファ イル の script 要素 の 
1 中 に 書き ます 。 実際 に 短い ソー スコ ー ド を 書い て 、 ブ ラウ ザ で 表 
示し て み ま し よう 。 








@ メモ 帳 に 追加 で ソー スコ ー ド を 入力 する 


先ほど 起動 し た まま の メモ 帳 に 、 以 下 の ソ ー ス コー ド ( 色 文 字 部 分 ) を 追加 し て 入力 
し て くだ さい 。 


<!DOCTYPE htm1> 


1 
2 , <html 1ang="]a"> 

8 <head> 

4 , <meta charset="ut 和 f-8"> 

5 ! <tit1e> プロ グラ ム 実 行 テス ト </tit1e> 
6 </head> 

SI 

8 <body> 

9 


: <h1> プロ グラ ム 実 行 テス ト </h1> 

10 <Script> 

window.alert( "He11o, wor1d!' ): 
12 </script> 

13 </body> 

14 ! </htm1> 


こよ 
が 


入力 し 終わ っ た ら 、 以 下 の よ 
つ な お 手順 で 、HTML ファ イル と 。-------ーーーーーー 
し て 保存 し ます 。 「window.alert(Hello. world!):]」 は 警告 ダイ アロ グ 
ボッ クス を 表示 する 文 で す 。 文法 的 な 意味 は Day3- 
Lesson1-Section2 (以後 、3-1-2 の よう に 略 ) で 学 
習 し ます 。 


| ED2 3 ぅ さき が 


Day 





上 「 フ ァイル 」 を クリ ッ ク 
⑫ 「 名 前 を 付け て 保存 ]」 を クリ ッ ク 


























| 上 書き 名 rrs Lesson 
ペー ジ 訂 定 (U).…- 2 
印刷 (P).… 
ー、 N 
OO 保存 先 の フォ ル ダ を ダブ ルク リッ ク 1 
ス 
コ 
《⑳ ファ イル の 種類 で 「 す べ て の ファ イル 」 を 書 
選択 く 
文字 コー ド で 「UTF-8」 を 選択 
ファ イル 名 の 欄 に 、 半 角 で 「sample. 
html」 と 入力 し て 、「 保 存 」 を クリ ッ ク 
これ で ファ イル の 保存 は 完了 で す 。 次 は 、 こ の HTML ファ イル を ブラ ウザ で 開い て 
み ま す 。 
MEMO 
文字 コー ド で 「UTF-8」 以外 を 選択 する と 、 ブ ラウ ザ 
で 開い た と き に 文字 化け し ます 。 ま た 、 こ の 本 で は 、 
HTML フ ァイル は HTML5 の 文法 に の っ と っ て 書い て 
いき ます 。 
KO GOAL 
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En、 
Lesson 2 


。 。 . プロ グラ ム を 実行 する 


SECTION 


先ほど 保存 し た HTML フ ァイル を ブラ ウザ で 開い て 、 
の JavaScriDpt の プロ グラ ム を 実行 し て み ま し ょ よう 。 








@ HTML ファ イル を ブラ ウザ で 開く 


JavaScriot の プロ グラ ム を 実行 する に は 、 プ ログ ラム が 書き 込ま れ た HTML ファ イ 
ル を ブラ ウザ で 開く だ け で OK で す 。 ブ ラウ ザ が JavaScript の プロ グラ ム を 実行 し て 
くれ ます 。sample.html フ ァイル を 、OChrome で 開い て み ま し ょ よう 。 


保存 先 の フォ ル ダ を ダブ ルク リッ ク し て 
開く 


の ⑳ 「sample.html」 の アイ コン を 右 ク リッ ク 


《 「 プ ログ ラム か ら 開 く 」 に ポイ ンタ を 合わ 
せる 


《⑳⑩ 「Google Chrome」 を クリ ッ ク 








Day 





XX [file:///C:/Users/ITO9%20Shizuka/Desktor 三 警告 ダイ ア 口 グ ボ ツ ク ス が 
JavyaScript の アラ ー ト 表示 され た 


ビ 
の 
の 
の 
O 
コ 








sample.html が Chrome で 開か れ 、 警 告 ダ イア ログ ボッ クス が 表示 され れ ば 、 プ ロ 
グラ ム は 正しく 書け て いま す 。 表 示さ れ た ダイ アロ グ の 「OK] を クリ ッ ク す れ ば 、 ダ イ 
アロ グ ボ ックス は 消え ます 。 


プロ グラ ム を 修正 し た り 、 加 筆 し た りす る た め に 、 
HTML フ ァイル を メモ 帳 で 開き た い 場 合 は 、「④ 
「Google Chrome] を クリ ッ ク 」 の と ころ で 「 メ モ 帳 ] 
を クリ ッ ク し て くだ さい 。 


mei 電 RENND ロ NM 区 | | 


も し ダイ アロ グ が 表示 され な い 場 合 は 、HTML の コー 
ド か 、JavaScript の コー ド の どこ か に 間違い が ある 
は ず で す 。 本 の コー ド と テキ ス ト エ ディ タ に 入力 し た 
コー ド を よく 見 比べ て みて 、 修 正 し て くだ さい 。 


ここ まで 完了 すれ ば 、 こ れ か ら JavaScript の プロ グラ ム を 勉強 し て いく 準備 が 整っ 
た と いう と と で す 。 

sample.html を 表示 し た Chrome と メモ 帳 は まだ 閉じ な いで くだ さい 。 こ の まま 続 
いて 、 プ ログ ラム を 少し 書き 換え て み ま し よう つ 。 


KDD GOAL 
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1psy 


COLUMN 


JavaScript の ソー スコ ー ド を 記入 する 場所 
JavaScript の コー ド を 書く 場所 は 、 大 きく 分 け て 3 ヵ所 あり ます 。 


①HTML ファ イル の script 要 素 の 中 
⑧a 要 素 の 開始 タグ の 中 
③JavaScript フ ァイル (拡張 子 .js) の 中 


① は 先ほど 使い まし た の で 省略 し ます 。 
② は 、a 要 素 の href 属 性 値 と し て 、URL の よう に し て ソー スコ ー ド を 書く 方 法 で す 。 こ の 書き 方 
を JavaScript 疑 伺 プ ロト コル と いい ます 。 ソ ー ス コー ド は 、 こ の よう に な り ま す 。 


8 , <body> 
9 ! <h1> プロ グラ ム 実 行 テス ト </h1> 
10, <a href="JavaScript:window.a1ert( "He11o, wor1d! ' ) "> 警告 ダイ アロ グ ボ ッ 
, クス を 表示 </a> 
11 ! </body> 
画面 に 表示 され た リン ク を クリ ッ ク す る と 、 警 告 ダ イア ログ ボッ クス が 表示 され ます 。 
③JavaScript フ ァイル (拡張 子 .jS) の 中 に 書く 方 法 で す が 、HTML ファ イル と は 別 の ファ イル 
に JavaScript の ソー スコ ー ド を 書き (script タ グ は 不要 ) 、 
・ 拡 張子 を .js 
・ 文 字 コ ー ド を utf-8 
に し て 名 前 を 付け て (sample.jS な ど )、 た と えば HTML ファ イル と 同じ 場所 に 保存 し ます 。 


珍 samplejs 


1 window.alert( "He11o, wor1d!'): 


その 上 で 、HTML ファ イル の head 要 素 の 中 に 、 関 連 付け の た め の script 要 素 を 記入 すれ ば OK 
Di8 

, <!IDOCTYPE htm1> 

<htm1 1ang="]a"> 

<head> 

<meta charset="utf-8"> 

<tit1e> プロ グラ ム 実 行 テ スト </tit1e> 

<script src="samp1e.]s"></script> 

</head> 


く <body> 
<h1> プロ グラ ム 実 行 テ スト </h1> 
</body> 
</htm1> 


SS ニニ らら の oo へ の の ょ oo 一 


3 さき レル 


rs プロ グラ ム を 
トム 書き 換え て 実行 する 


SECTION 


1 ブラ ウザ で sample.html を 表示 し た まま 、 テ キス ト エ ディ タ で 





ソー スコ ー ド を 書き 換え て み ま し ょ う 。 ご これ か ら 先 、 何 度 も お こ 
な つ 手 順 で す 。 


@ JavaScript の ソー スコ ー ド を 書き 換え る 


ソー スコ ー ド を 書き 換え て 、 表 示さ れる ダイ アロ グ の 種類 を 「 警 告 ダ イア ログ ボッ ク 
ス 」 か ら 「 確 認 ダ イア ログ ボッ クス 」 に 変え て み ま し よう 。 


朝 登 告 ダ イア ログ ボッ クス 朝 確認 ダイ アロ グ ボ ックス 








| JavaScript の アラ ー ト 


Javascript 


hello, world hello, world 


に し 














メモ 帳 の ソー スコ ー ド の 「alert」 を 、 以下 の よう に 「confirm] に 書き 換え て くだ さい 。 


10 1 く ぐ Scnipt> 
11 , window.confirm( "He11o, wor1d!' ) 
12 1! </ScniDt> 


※ SCript 要 素 以外 は 省略 し て いま す 。 


《D「 フ ァイル 」 を クリ ッ ク 
⑲ 「 上 書き 保存 ]」 を クリ ッ ク 


印 民 (P).… Ctr+p MEMO 


メモ 四 の 終了 (X) 


<h1? ブ ログ ラム 実行 テス ト く /h1> 


く script> 上 書き 保存 は 、 Ctrl 3 S キ ー で も OK で す 。 


confirm("Hello, world! う : 
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プロ グラ ム 奏 行 テ 」 


テス ト 
6 fle:///C:/Users/ITO9%20Shizuka/Desktor 


 「 再 読み 込み ボタ ン 」 を クリ ッ ク 


ブロ グラ ム 実 行 テ スト MEMMO 


再読 み 込み は 「 リ ロー ド 」 と も いい ます 。 ブ ラウ 
ザ が アク ティ ブ に な っ て いれ ば 、F5 キ ー を 押し 
て も 、 リ ロー ド で きま す 。 











確認 ダイ アロ グ ボ ックス が 表示 され れ ば 、 プ ログ ラム は きち ん と 書き 換え られ て いま 
す 。 表 示さ れ た ダイ アロ グ ボ ックス の 「OK」 か 「 キ ャ ン セ ル 」 を クリ ッ ク す れ ば 、 ダ イ 
アロ グ ボ ックス は 消え ます 。 


今後 、 新 し く 学 ん だ 内 容 を 、 サ ンプ ルプ ログ ラム に 追加 で 書い た り 、 エ ラー を 修正 し 
た り し て 実行 する と き に は 、Chrome と メモ 帳 で 同時 に sample.html を 開い た まま 、 
「 メ モ 帳 で 上 書き 保存 ] 一 「Chrome で 再読 み 込 み 」 の 手順 を 繰り 返し て 、 動 作 を 確認 し 
て くだ さい 。 


ED  ) レバ 


_s ファ イル の 拡張 子 が 
人 ム 4 見 える よう に 設定 する 


ド に } コ elle)、」 


最後 の 準備 と し て 、HTML ファ イル な どの 拡張 子 が 表示 され る 
4 よう に 設定 し て お きま し ょ よう 。 






人 @ 拡張 子 は ファ イル の 種類 を 表す 文字 列 


拡張 子 と は 、 フ ァイル 名 の 未 尾 に ある 「 ド ッ ト と 英 数 字 の 文字 列 ] の こと で 、 フ ァ 
イル の 種類 を 表し て いま す 。 HTML フ ァイル の 拡張 子 は 「.htmll か 「.htm」 で 、 
JavaScript フ ァイル の 拡張 子 は 、「.jS] で す 。 

Windows 7 や Windows 8 の 初期 状態 で は 、 拡 張子 は 表示 され な い 設 定 に な っ て い 
ます 。 で す が 、Web ペ ー ジ を 作っ た り 、JavaScript の プロ グラ ム を 書い た りす る と き 
に は 、 拡 張子 で ファ イル の 種類 が 分 か っ た 方 が 便利 な の で 、 拡 張子 が 表示 され る よう に 
設定 を 変更 し て お きま し ょ よう 。 


$ フ ァイル の 拡張 子 を 表示 する に は ? 


Windows 7 で ファ イル の 拡張 子 を 表示 する に は 、 以下 の 操作 手順 を 行っ て くだ さい 。 


人 5 スタ ー ト ボタ ン を クリ ッ ク 
⑳ 「 コ ント ロー ル パ ネ ル 」 を クリ ッ ク 
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⑥「 デ スク トッ プ の カス タマ イズ 」 を クリ ッ 
み 





《⑳「 フ ォ ル ダー オプ ショ ン 」 を クリ ッ ク 





⑬ 「 表 示 」 を クリ ッ ク 


ヨ ヨ リル ラー 間 と に 新 じ ツウ ィ ン 
= カル ダー 幸 世 た に 新 し (ウィ ンド ウ を 作る (W 
者 1 ビク 


上 に 下 Pe ff( 
9 ジン ルリ 2 半 所 2 ワル ウリ o2 志 KO 


ナビ ゲー ショ ン ウィ ンド ウ 
っ 氷上 門 すべ て の フォ ルター を 表示 する (D 
二 日吉 8 に 現在 の フォ ル ダ ー ま で 展 間 す る (0 





⑬ スラ イド バー を 下 ま で ドラ ッ グ 


2 「 登 録 さ れ て いる 拡張 子 は 表示 し な い 」 の 
チェ ッ ク を 外す 


⑩「OK」 を クリ ッ ク 












" 語 "icoitiihd5hir 






ス に 自動 99 に 入力 する 

き を コー で 選択 する 
ログ オン 4 和 に 以前 の フォ ル ダ ー ウィ ンド ワウ を 表示 する 

還 号 化 や 圧 給 S れ た NTFS ファ イル を カラ ー で 表示 する 


ソ ( 

M 詩 F ラ イフ は レン ピュー ター] フォ ルター に 表示 し な い 
マ 給 !N 暫 ファ イル アイ ゴン を 表示 する 
沸 に ア イエ を 表示 し 、 疑 中 は 表示 し な い 





マ 保 れ た オペ レー ティ ング ジス テム アイ ル を 表示 し な い ( 推 尻 ) 
G) に Emma. 


これ で 拡張 子 が 表示 され る 設定 に な り ま し た 。 
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Windows 8 で 拡張 子 を 表示 する に は ? 

① キー ボー ド の 最 下段 に ある 「Windows マー ク 」 キー を 押し な が ら X キ ー を 押す 

② 表示 され た 一 覧 か ら 「 コ ント ロー ル パ ネ ル 」 を クリ ッ ク し て 、 コ ント ロー ル パ ネ ル を 開く 
③⑧「 デ スク トッ プ の カス タマ イズ 」 を クリ ッ ク 

④「 フ ォ ル ダー オプ ショ ン 」 を クリ ッ ク 

⑤「 表 示 ] を クリ ッ ク 

⑥ 「 詳 細 設 定 ] ボッ クス の スラ イド バー を 下 ま で ドラ ッ グ 

⑦「 登 録 さ れ て いる 拡張 子 は 表示 し な い ]」 の チェ ッ ク を 外す 

⑧「OK」 を クリ ッ ク 


ビ 
の 
の 
の 
O 
うっ 


これ で 拡張 子 が 表示 され る 設定 に な り ま す 。 


COLUMN 


HTML ファ イル の 拡張 子 を ブラ ウザ に 関連 付け る 

HTML ファ イル の 拡張 子 で ある 「.htmll と 「.htm」 を Chrome に 関連 付け て お け ば 、HTML ファ 
イル の アイ コン を ダブ ルク リッ ク す る だ け で 、 自動 的 に その ファ イル が Ohrome で 開く よう に な 
り ま す 。JavaSoript の 学習 を 進め て いく うえ で は 、 何 度 も HTML フ ァイル を 開く こと に な り ま 
す の で 、 面 倒 な 手間 は 少し で も 省け る よう に し て お きま し ょ う 。 


①「 ス ター ト 」 メニュー の 「 既 定 の プロ グラ ム 」 を クリ ッ ク 

②「 フ ァイル の 種類 また は プロ トコ ル の プロ グラ ム の 関連 付け ]」 を クリ ッ ク 

⑬③「 フ ァイル の 種類 また は プロ トコ ル を 特定 の プロ グラ ム へ 関連 付け ます 」 が 開く の で 、 拡 張子 
の 一 覧 か ら 「.html」 を 見 つけ て 、 ク リッ ク し て 選択 

④「 プ ログ ラム の 変更 ] ボタ ン を クリ ッ ク 

⑧⑤「Google Chrome」 を 選択 し て 「OK] ボタ ン を クリ ッ ク 


同じ よう に し て 、 愛 の た め 、 拡 張子 「.htm」 も Chrome に 関連 付け て お きま し ょ う 。 ま た 、 拡 
張子 「jJS] は メモ 帳 な ど 、 使 っ て いる テキ ス ト エ ディ タ に 関連 付け て お きま し ょ う 。 


eial 穫 里 生 Or9rOAVAm さ は 遇 沿革 3 さい 区 | N う 








Lesson 





プロ グラ ム 作 成 前 に 
必要 な 知識 

この レッ スン で は 、 そ も そ も プ ログ ラム と 
は 何 な の か を 簡単 に 説明 し た うえ で 、 ソ ー 
スコ ー ド を 書く と き の 注意 事項 を 説明 し ま 
す 。 





1 プロ グラ ム と は 何 か ? 
2 ソー スコ ー ド の 書き 方 


還っ 
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ea 
Lesson 3 


。 。 . プロ グラ ム と は 何 か ? 


SECTION 


1 今回 初め て プロ グラ ミン グ を 学ぶ と いう 人 向け に 、 プ ログ ラム の 





其 本 的 な 構造 を 説明 し て お きま す 。 こ の 本 で これ か ら ど うい うこ ご 
と を 学ぶ の か 、 大 ま か に つか ん で くだ さい 。 


プロ グラ ム と は ? 


一 般 に コン ピュ ー タ の プロ グラ ム と は 、「 コ ンピュータ に 実行 し て ほし い 内 容 を 書い 
た 指示 書 ]」 で す 。 こ れ を JavaScript と いう プロ グラ ミン グ 言 語 で 書く と JavaScript 
の プロ グラ ム に な り ま すし 、PHP と いう 言語 で 書く へ と PHP の プロ グラ ム に な り ま す 。 

コン ピュ ー タ と は 何 な の か を ひと こと で 言え ば 、「 デ ー タ 」 を 「 処 理 ] する 機械 で す 。 
コン ピュ ー タ に 何 か を し て も ら う に は 、 し て ほし いこ と を 「 デ ー タ 」 と 「 処 理 」 に 分 解 し 
て プロ グラ ム に 書き 、 コ ンピュータ に 伝え て あげ な いと いけ ませ ん 。 で す の で 、 本 書 で 
学ぶ 内 容 は 、 大 きく 分 ける と 、 


① デ ー タ 
② デ ー タ を 処理 する 手順 "” ------------- 


処理 手順 の こと を 、 プ ログ ラミ ング 用 語 で 「 ア ル 
の 2 つ に な り ま す 。 ゴリ ズム 」 と いい ます 。 


デー タ の 学習 内 容 


プロ グラ ム で 使う デー タ は 、「 変 数 ] と 呼ば れる 箱 の よう な 入れ 物 の 中 に 保存 し て 使 
いま す 。 よ っ て 「 デ ー タ 」 の 学習 は 、 お も に 「 デ ー タ の 種類 ] と 「 変 数 の 使い 方 ] に つい て 
の 学習 に な り ま す 。 


この 本 で 、 変数 の 使い 方 と し て 学ぶ 内 容 は 、 デー タ 型 、 
文字 列 、 数 値 、 論理 値 、 配 列 、 オ ブ ジ ェクト な ご ど です 。 


Day 





人 @ 処 理 の 単位 三文 


次 に 、 プ ログ ラム の も う 1 つ の 要素 で ある 「 処 理 手順 ] に つい て 説明 し て お きま す 。 Lesson 
プロ グラ ム の 中 に 書く 1 つ 1 つ の 処理 は 、 文 と いう 単位 で 記述 し ます 。 先 ほど 作っ た プ 
ログ ラム は 、 文 が 1 つ だ け の プロ グラ ム で す 。 





く SCP1Dt> 
window.a1ert( "He11o,。 wor1d!' ) : 
く / Script> 


人 @ 処理 手順 ① : 先頭 か ら 順番 に 実行 する 


複数 の 文 が 書か れ た プロ グラ ム は 、 先頭 の 文 か ら 順 番 に 実行 され ます 。 こ れ が プロ グ 
ラム の も っ と も 基本 的 な 処理 手順 で す 。 


苗 負 理 手順 ① : 先頭 か ら 順番 (順次 ) 


先頭 か ら 順 番 に 実行 され る 


くき 滞 rY テ と MIND 展 | CS 





人 @ 負 理 手順 ② : 条件 で 分 岐 し て 実行 する 


も し 、 処理 の 流れ を 変え た いと き に は 、 制御 文 と いう 種類 の 文 を 使い ます 。 た と えば 、 
何ら か の 条件 に よっ て 処理 手順 の 順番 を 変え た そい と き は 、 制 御 文 の 1 つ で ある 条件 文 を 
使っ て 処理 を 分 岐 さ せま す 。 ご これ が 2 番目 の 処理 手順 で ある 条件 分 岐 (選択 ) で す 。 
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再 処理 手順 ② : 条件 分 岐 (選択 ) 


条件 に よっ て 負 理 の 流れ を 変え る 


条件 文 に は 、 文 、if 一 else 文 、if 一 
else if else 文 、switch 文 な ど が あり 
ます 。 





@ 処理 手順 ③ : 繰り 返し 実行 する 


また 、 一 定 の 条件 の あい だ 、 同 じ 処 理 を 繰り 返し 実行 し た いと き に は 、 お な じ く 制御 
文 の 1 つ で ある 繰り 返し 文 (反復 文 ) を 使い ます 。 


再 処理 手順 ③ : 繰り 返し (反復 ) 





繰り 返し 文 に は 、while 文 、for 文 、do 


while 文 な ど が あり ます 。 
処理 


以上 の 内 容 は 、 だ いた い ど の プロ グラ ミン グ 言 語 で も 共通 し て いる 内 容 で す 。 
JavaScript を 学ぶ と いう こと は 、 こ れ ら を 「JavaScript と いう プロ グラ ミン グ 言 語 で 
どの よう に 書く か ? 」 を 学ぶ と いう こと に な り ま す 。 


| ュ ソ 間 レル 


Day 


本 


Lesson 3 


ー 。 . ソー スコ ー ド の 書き 方 











SECTION 3 
これから いろ いろ な 文法 を 学ん で いき ます が 、 ま すず は ソー スコ ー 

ド を 書く と き に 知っ て お か な く て は いけ な い 最 低 限 の 決ま り に つ に 

いて 説明 し ます 。 負 

ピ 。 

人 半角 文字 で 書く 
JavaScript の プロ グラ ム の 中 身 (ソー スコ ー ド ) は 、 す べ て 半角 文字 で 書い て くだ さ コ 
い 。 半角 文字 と は 、 | 

MEMO ド 

・ キ ギ 月 アル ファ ベッ ト 全角 スペ ー ス は 、 プ ログ ラム で は スペ ー ス と 見 な され な の 

・ 学 衣 数 字 い の で 、 ソ ー ス コー ド を 書く の に 使っ て は いけ ませ ん 。 書 

・ 半 角 記 号 全角 スペ ー ス を 使っ て いる と エラ ー に な り ま す 。 に に コ 


・ 半 角 ス ペー ス (タブ も OK) 


で す 。 半 角 カ タカ ナ は 確か に 半角 で す が 、 ソ ー ス コー ド を 書く の に 使っ て は いけ ませ ん 。 
タブ は 厳密 に は 半角 文字 で は あり ませ ん が 、 ソ ー ス コー ド を 書く の に 使え ます 。 タ ブ 
や 半角 スペ ー ス は 、 い くつ 書い て あっ て も 、 才 分 な も の は 無視 され ます の で 、 ソ ー ス コー 
ド の 見 た 目 を 見 や すく 整え る の に 使っ て くだ さい 。 
基本 は 半角 文字 で す が 、 シ ング ルク オー ト 、 ダ ブル クオ ー ト の 中 だ け は 、 全 角 文 字 が 
使え ます (これ に つい て は 、1-4-3 で 説明 し ます ) 。 


人 @ 大 文字 と 小文字 の 違い に 注意 する 


JavaScript の 文法 で は 、 ア ルフ ァ ベ ッ ト の 大 文字 と 小文字 は 別 の 文字 と し て 扱わ れ 
ます 。 た と えば 、 先ほど の サン プル プロ グラ ム で 使っ た 「alert] で す が 、 こ れ を 「Alertl 
と 書い た り 、「ALERT」 と 書い た りす る と エラ ー に な り 、 プロ グラ ム が 動き ませ ん 。 ソ ー 
スコ ー ド を 書く と き は 、 大 文字 と 小文字 の 違い に は くれ ぐれ も 注意 し て 書き まし ょ う 。 
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〇 alert (すべ て 小文字 ) 
X Alert (先頭 が 大 文字 ) 
X ALERT (すべ て 大 文字 ) 


人 @ 文 の 終わ り は 「 セ ミコ ロン (:)」 と 「 改 行 」 


前 の セク ショ ン で 、 プ ログ ラム の 中 に 書く 1 つ 1 つ の 処理 は 、 文 と いう 単位 で 記述 す 
る と 説明 し まし た 。 文 と 文 の あい だ は 、 改 行か セミ コロ ン (:) を 使っ て 区 切り ます 。 両 


方 を 同時 に 使っ て も OK で す 。 
再 文 と 文 の 区 切り 方 
文 ① : 文 ② : 文 ③ : 文 ④ | セミ コロ ン (:) だ け 
文 ① 
文 ら 

行 と セミ コロ ン 
文 ② : 


改行 だ け 、 あ る い は セミ コロ ン (:) だ け で も 、 文 の 終わ り と 見 な され ます の で 、 わ ざ 
わざ 両方 を 使 つ 必要 は な い の で は 、 と 思う か も し れ ま せん 。 

し か し 、JavaScript の 文法 に は 、「1 行 が 長い 文 の 場合 、 途 中 で 改行 し て も 良い 」 と 
いつ 規則 も ある の で す 。 そ の た め 、 文 の 終わ り を 改行 だ け に し て いる と 、 ソ ー ス コー ド 
を あと か ら 見 直し た り 修正 し た りす る と き 、 そ の 改行 が 文 の 途中 な の か 、 文 の 終わ りな 
の か を 、 つ ね に 注意 し な く て は な り ま せん 。 ソ ー ス コー ド が 複雑 に な っ て くる と 、 文 の 
ー 部 を つっ か り 消 し 忘れ て エラ ー に な る こと が あり ます 。 

プロ グラ マ と し て は 、 エ ラー の 原因 と な りう る こと は 、 で きる だ け 避 ける よう に し た 
方 が 無難 で す 。 そ うつ いつ わけ で 、1 つの 文 の 終わ り は 、「 セ ミコ ロン (:) + 改 行 」 と する 
習慣 を 付け て お きま し ょ う 。 


人 @ ソ ー ス コー ド は 読み や すぐ 書く 


ソー スコ ー ド が 複 紋 に な っ て くる と 、 だ ん だ ん 読み に くく な っ て きま す 。 読み に くい 
ソー スコ ー ド は エラ ー の 元 で す 。 あ と で 改良 する と き に も 時 間 が か か り ま す 。 

ソー スコ ー ド を 書く と き に は 、 必 要 に 応じ て 、 半 角 ス ペー ス や タブ に よる イン デン ト 
(行頭 字 下げ ) や コメ ント な ご ど を 使っ て くだ さい (コメ ント は 1-4-7 で 説明 し ます )。 


1 Day 3 ぅ 3 き と 


Lesson 





変数 の し くみ と 
単純 な デー タ 


この レッ スン で は 、 基 本 的 な 変数 の 使い 方 
と 3 種類 の 単純 な デー タ を 学び ます 。 





変数 の 使い 方 

デー タ の 種類 1 一 一 数 値 
デー タ の 種類 (2 一 一 文字 列 
デー タ の 種類 3 一 一 論理 値 
算術 演算 子 

連結 演算 子 

コメ ント の 書き 方 

デー タ 型 


oO つい の の 6 ON 一 


EE II 


Lesson | 0 


、 。 . 変数 の 使い 方 


SECTION 


1 プロ グラ ム で 使う デー タ を 保存 し て お く 入 れ 物 、 変 数 に つい て 学 
び ま す 。 





人 @ 変数 と は ? 


変数 と は 、 プ ログ ラム で 処理 し た い デ ー タ を 保存 し て お く た め の 入れ 物 で 、 イ メー ジ 
と し て は 箱 の よう な も の で す 。 
変数 を 使い た いと き は 、 そ の 都度 、 計 
な く て は な り ま せん 。 新しく 変数 を 作 
る こと を 、 変 数 を 宣言 (定義 ) する と い 
いま す 。 





@ 変数 の 宣言 の し か た 


変数 を 宣言 する の は 簡単 で す 。「 変 数 の 名 前 」 を 考え て 、 次 の よう に 宣言 文 を 書き ます 。 
再 構文 : 変数 の 宣言 文 


「var」 は 、 英 語 で 「 変 数 ]」 を 意味 する 単語 で ある 
「variable」 の 、 先 頭 か ら 3 文字 を 取っ て 略し た も の 
Cd 夫 


Day 





@ 変数 名 の 付け 方 の ルー ル 


変数 の 名 前 、 す な わ ち 変数 名 は 、 プ ログ ラマ が 自由 に 付け て か まい ませ ん が 、 次 の よ 
うな ルー ル が あり ます 。 


ビ 
の 
の 
の 
O 
コ 


・ 変 数 名 に 使え る 文字 は 、 半 角 ア ルフ ァ ベ ッ ト 、 半 角 数 字 、 半 角 ア ンダ ー ス コア (し )、 
半角 ドル 記号 ($) 

・ 半 角 数 字 は 先頭 の 文字 に は 使え な い 

・ ア ルフ ァ ベ ッ ト の 大 文字 と 小文字 は 区 別 さ れる 

・ 予 約 語 (p.40) は 使え な い 


変数 名 を 付け る と き は 、 中 に 入っ て いる デー タ が どう いう デー タ な の か が すぐ に 分 か 
る 名 前 に し て お く と 便利 で す 。 た と えば 、 西 暦 を 表す 数 値 デ ー タ を 入れ て お ぐ く 変数 名 で 
あれ ば 「year」 に し て お く と いっ た 具合 で す 。 


SC 六 S 畿 肉 区 | . い 


人 @ 変 数 に デー タ を 代入 する に は ? 


宣言 し た 変数 に デー タ を 入れ る こと を 、 デ ー タ を 代入 する と いい ます 。 た と えば 、 
「year」 と いう 名 前 の 変数 を 宣言 し て か ら 「2014] と いう 数 値 デ ー タ を 代入 する に は 、 
この よう に 書き ます 。 


var year: 
year = 2914: 


イコ ー ル 記号 ( 三 ) は 、 変 数 (な 辺 ) に 、 デ ー タ (右辺 ) を 代入 する と いつ 処理 を 表す 記 
号 で 、 プ ログ ラミ ング 用 語 叶 で 代入 演算 子 と いい ます 。 左辺 と 右辺 を 逆 に 書い て は いけ ま 
せん 。 変数 の 宣言 と 代入 は 、 次 の よう に 1 行 で まとめ て 書く こと も で きま す 。 


var year = 2914: 


宣言 し た 変数 に 初め て デー タ を 代入 する こと を 、 プ ロ 
グラ ミン グ 用 語 で 初期 化 と いい ます 。 イ コー ル の 左右 
に 半角 スペ ー ス を 入れ て いる の は 、 見 や すく する た め 
で す 。 文法 上 は な く て も か まい ませ ん 。 
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@@ 変数 を 参照 する に は ? 


変数 に 代入 し た デー タ を 見 た り 、 他 の 文 で 使っ た りす る こと を 変数 を 参照 する と いい 
ます 。 変数 を 参照 する に は 、 文 の 中 に 変数 名 を 書く だ け で OK で す 。 

た こえ ば 、 変 数 a に 入 つ て いる 数 値 デ ー タ を 、 新 た に 宣言 し た 変数 b に 代入 し た いと 
き に は 、 右 辺 に 「a」 と 書き ます 。 


Varn a = 2 


var b = a: // 変数 b に 変数 a の 値 (2) が 代入 され た 


「// 変 数 b に 変数 a の 値 (2) が 代入 され た 」 は コメ ン 
ト で す 。1-4-7 で 説明 し ます 。 


COLUMN 

予約 語 

予約 語 て と いう の は 、 JavaSocript の 構文 で 使わ れる 単語 な の で 、 あら か じ め JavaScript が 「 予 約 」 
し て いる 単語 の こと で す 。 こ れ ら は 変数 名 に は 使え ませ ん 。 


世 JavaScript の 予約 語 
break Case catch continue debugger defau1t 
delete do else fna11y for function 
ュ 生 1n instanceof new Freturn switch 
this throw try typeof Var void 


この 他 に 、 将来 、 予約 語 に な る 可能 性 の ある キー ワー ド と いう も の も あり ます 。 現時 点 で 、 エ ラー 
に な る も の と な ら な いも の が あり ます 。 こ れ ら も 変数 名 に は 使わ な い 方 が いい で し ょ う 。 
持 来 予約 語 に な る 可能 性 の ある キー ワー ド 


class enum eXDOrt extends 1mport 
SuPper implements interface 1et package 
private protected pub1ic static yie1d 


変数 名 に 予約 語 を 使っ た プロ グラ ム を 実行 する と 、 エ ラー に な り 、 ブ ラウ ザ の 画面 に 何 も 表 示さ 
れ ま せん 。 特 に エラ ー を 示す 表示 は あり ませ ん の で 、 プ ログ ラム を 実行 し た の に ブラ ウザ で 何 も 
起こ ら な いと き は 、 変 数 名 に 予約 語 を 使っ て いな いか 確認 し て み ま し ょ う 。 


1psy に 電 ) 2osy 


_* デー タ の 種類 ① 1 
軍事 ま ー eo 


SECTION 

変数 に 代入 で きる デー タ の 種類 を 1 つ す つ 順 番 に 学ん で いき ま 
し よう 。 1 つ 目 の デー タ は 、 数 値 で す 。 数 値 は いろ いろ な 計算 に 
使え ます 。 





人 @ 数値 と は ? 


JavaScript で の 数 値 デ ー タ と は 、 整 数 と 小数 を 指し ます 。 整 数 は 、 負 の 整数 も も ち 
ろ ん OK で す 。 分 数 や 無理 数 な ご は 扱え ませ ん 。 


@@ 変数 に 数 値 を 代入 する に は ? 


変数 に 数 値 を 代入 する 方 法 は 、 す で に 前 の セク ショ ン で 紹介 し まし た 。 変数 に 数 値 を 
代入 する に は 、 


融 難 一 ら 滴 藤 S さ ー\l 区 | よい 


王 構文 : 数 値 の 代入 文 


変数 名 = 数 値 


と 書き ます 。 た と えば 、 year と いつ 変数 に 「2014] と いう 整数 を 代入 し た り 、 average 
と いつ 変数 に 「-0.23] と いう 小数 を 代入 し た りす る に は 、 こ の よう に 書き ます 。 


Var year = 2914 
Var avVerage = -9.23 


数 値 は 、1-4-5 で 紹介 する 算術 演算 子 を 使っ て 、 計算 を する こと が で きま す 。 


ソー スコ ー ド の 文中 に ダイ レク ト に 書か れ た 数 字 の こと を 、 プ ログ ラミ ング 用 語 で 
数 値 リ テラ ル と 呼び ます 。 同 じ 数 字 で も 、 シ ング ルク オー ト や ダブ ルク オー ト で 囲 
お むと 、 こ の あと 説明 する 文字 列 リ テラ ル と な り ま す 。 違い に 注意 し て くだ さい 。 
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es4 デー タ の 種類 ② 
ja 人 一 文字 列 


SECTION 


いう の は 、 一 般 に 「 文 字 ] や 「 テ キス ト 」 と 言わ れる 文字 デー タ の 、 


1 変数 に 代入 で きる デー タ の 種類 、2 つ 目 は 文字 列 で す 。 文 字 列 と 
プロ グラ ミン グ 的 お 言い 方 で す 。 





人 @ 文 字 列 と は ? 


文字 デー タ の こと を 、 プ ログ ラミ ング 用 語 で 「 文 字 列 ] と いい ます 。 


・ ア ルフ ァ ベ ッ ト の 大 文字 ・ 小 文字 (全角 、 半 角 と も に ) 
・ 日 本 語 の ひら が な 、 カ タカ ナ 、 漢 字 
・ 数字 、 記 号 、 ス ペー ス (全角 、 半 角 と も に ) 


な ご は すべ て 文字 列 で す 。 文字 列 を 変数 に 代入 する と き 、 ソ ー ス コー ド の 中 で は 、 半 角 
の シン グル クオ ー ト () か 、 ダ ブル クオ ー ト (") で 囲み ます 。 囲ん だ ひと か た まり が 、 そ 
れ ぞ れ 1 つ の 文字 列 デ ー タ と 見 な され ます 。 

世 いろ いろ な 文字 列 
"He11o。 wor1d! " 
" ニュー ヨーク は 、 今 日 も いい 天気 で す 。" 
"93-5217-2429" 






それ ぞ れ が 
1 つの 文字 列 デー タ 










ソー スコ ー ド の 中 で 、 シ ング ルク オー ト () や ダブ ルク オー ト (") で 囲ま れ た 文字 列 の こと を 、 
プロ グラ ミン グ 用 語 で 文字 列 リ テラ ル と 呼び ます 。 

文字 列 リ テラ ル を 囲 お は じ め の クオ ー ト と 終わ り の クオ ー ト は 、 シ ング ル な ら シ ング ル 、 ダ ブル 
な ら ダ ブル と いつ た よう に 同じ 種類 を 使う 必要 が あり ます 。 


ET 
ED レバ 





Day 





人 @ 変 数 に 文字 列 を 代入 する に は ? 


1 つの 変数 に 1 つの 文字 列 を 代入 する に は 、 代 入 演算 子 (一 ) の あと に 、 代 入 し た い 文 Lesson 
字 列 を 書き ます 。 


理 構文 : 文字 列 の 代入 文 


変数 名 =' 文字 列 ': 


た と えば 、「familyName」 と いつ 変数 に 「 田 中 ] と いつ 文字 列 を 代入 する な ら 、 こ の 
よう に 書き ます 。 


var familyName = ' 田 中": 


G 溢 黄 3 さ ーM! 区 | へ 


シン グル クオ ー ト と ダブ ルク オー ト 、 ど ちら を 使う か で す が 、 機 能 に 違い は あり ませ ん の で 、 好 
の み で どちら を 使っ て も 構い ませ ん 。 日 本 語 の 「」 と 「』 の 違い の よう な も の で す 。 

た だ し 、 文 字 列 リテラ ル の 中 で シン グル クオ ー ト や ダブ ルク オー ト を 使い た いと き に 、 外 側 の ク 
オー ト と 内 側 の クオ ー ト は 、 異 な る も の を 使っ 必要 が あり ます 。 


var nickName = 『 田中 将 大 選手 の ニッ ク ネ ー ム は " マー 君 " で す 。': 


選 判 衝 


COLUMN 

特殊 な 文字 を 表す エス ケー プシ ー ケ ンス 

文字 列 の 中 に 、 改行 や タブ な ど 、 デ ィ ス プレ イ に は 見 えな い 文 字 を 含め た いと き は 、 エ スケ ー プ 
シー ケン ス と いう 書き 方 を 使い ます 。 ダ ブル クオ ー ト で 囲ん だ 文字 列 リ テラ ル の 中 で 、 文字 列 と 
し て ダブ ルク オー ト を 使い た いと きも エス ケー プシ ー ケ ンス を 使い ます 。 

軍 お も な エス ケー プシ ー ケ ンス 


意味 ンー デン タン 


タブ \t 

改行 \n 

シン グル クオ ー ト \" 
ダブ ルク オー ト \" 
\( 円 記号 ) \\ 
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=…* デー タ の 種類 ③ 
人 一 論理 値 


SECTION 
デー タ の 種類 の 3 つ 目 は 、 論 理 値 で す 。 聞 き 慣 れ な いか も し れ ま 
せん が 、 要 する に 、 二 者 択 一 の ペア を 表す デー タ で す 。 





人 @ 論理 値 と は ? 


論理 値 と は 、 正 し い ( 真 ) か 正しく な い ( 偽 ) か を 表す 値 で 、 取 り 得 る 値 は この 2 つの 
ご どちら か だ け で す 。 正しい ( 真 ) を 表す 値 は true、 正 し く な い ( 偽 ) を 表す 値 は false で す 。 


人 @ 諸 理 値 の 代入 の し か た 
変数 に 論理 値 デ ー タ を 代入 する 場合 は 、 イ コー ル に 続け て 、true ま た は false と 書き 
ます 。 


萌 構文 : 論理 値 の 代入 文 


変数 名 =true (また は fa1se) : 


た と えば 、「check」 と いつ 変数 を 宣言 し て 、true と いう 論理 値 デ ー タ を 代入 する な ら 、 
この よう に 書き ます 。 


Var check = true: 


論理 値 は 別名 、 真 偽 値 、 真 理 値 、 ブ ー ル 値 、 ブ ー リ アン 型 な ど と も 呼ば れ ま す 。 文字 列 で は な い 
の で 、 ク オー ト で 囲ん で は いけ ませ ん 。 文字 列 の 「true] を 代入 し た いと き は 、 ク オー ト で 囲ん 
で "true" と 書き ます 。 ク オー ト が ある の と な い の と で は 、 代 入 さ れる デー タ の 種類 が 異な り ま す 
の で 、 注意 し て くだ さい 。 


| DE)2 3 さき レル 





記 1 
。 。 . 算術 演算 子 0 





SECTION 
数 値 の 計算 に 使っ う 「 十 ]」 や 「 一 」 な どの 記号 の こと を 、 プ ログ ラ 
1 ミン グ 用 語 で 算術 演算 子 と いい ます 。 


@ 5 種類 の 算術 演算 子 


数 値 の 計算 に 使 つ 算 術 演算 子 に は 、5 つ の 種類 が あり ます 。 


枯 癌 糖 区 | よい 





十 ヌ ァ ウズ 征 す (加算 ) 
マイ ナ ズ 引く (減算 ) 
8 アス タリ ズ ク 掛け る (乗算 ) 
/ スラ ッ シ ミ 割る (除算 ) 
% バー セ シ ド 示 り を 求め る (除算 の 剰 才 ) 


ソー スコ ー ド で の 使い 方 は この よう に な り ま す 。 


: //19 が 代入 され る 
 //4 が 代入 され る 
ぅ //21 が 代入 され る 
ぅ //2 が 代入 され る 
 //1 が 代入 され る 


IGG SF 9 
1 

IS 
区 

い ) いう) い ) い ) い J 


1 つの 文 の 中 に 複数 の 算術 演算 子 が ある 場合 は 、 基 本 
は 先頭 か ら 順 番 に 計算 され ます が 、「*」 「/」 「9%%」 が 
あれ ば 、 そ れ ら が 先 に 計算 され ます 。 
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an 
Lesson 4 


。 。 . 連結 演算 子 


SECTION 





「 十 」 記号 を 文字 列 に 対し て 使う と 、 文 字 列 と 文字 列 を つなぎ 合 
1) わせ る 連結 演算 子 に な り ま す 。 


人 文字 列 の 連結 


複数 の 文字 列 を 合体 させ る こと を 「 文 字 列 の 連結 ] と いい ます 。 文 字 列 を 連結 する に は 、 
連結 演算 子 ( 十 ) を 使い ます 。 


var fu11Name = ' 田 中 ' + ' 将 大 "': 


これ で 変数 fulIName に は 、「 田 中 将 大 ] と いつ う 文字 列 が 代入 され ます 。 
連結 演算 子 ( 二 ) を 使え ば 、 文 字 列 が 入っ た 変数 同士 を 連結 する こと も で きま す 。 


var fami1yName = ' 田 中": 


var firstName = ' 将 大 ': 
var fu11Name = familyName + fimstName: 


この 場合 も 、 変 数 fullName に は 、「 田 中 将 大 ] と いう 文字 列 が 代入 され ます 。 
数 字 の 文字 列 同士 を 連結 する と 、 計 算 は され ず に 、 単純 に つなぎ 合わ され ます 。 


var telephoneNumber = '93' + '5217'" + 2499': 


この 場合 、 変 数 telephoneNumber に は 「0352172400」 と いつ 文字 列 が 代入 され ま 
す 。 


LO 3 る ぁ レア 


ニー 


Lesson 4 


。 。 。 コメ ント の 書き 方 








ーー 
の 
の 
の 
O 
コ 


SECTION 


コメ ント は 、 ソ ー ス コー ド 中 に 自由 に 書き 込め る メモ の よう な も 
/ の で す 。 ソ ー ス コー ド を 読み や すく ぐす る た め な ど に 使い ます 。 








人 @ 2 種類 の コメ ント 


コメ ント は 、 ソ ー ス コー ド 中 に 自由 に 書き 込め る の で 、 メ モ の よう に 使え ます 。 コ メ 
ント の 内 容 は 、 お も に 処理 の 内 容 の 簡単 な 説 月 です 。 あ と か ら ソ ー ス コー ド を 読ん だ と 
き に 、 ご どこ に どん な 処理 が 書い て ある の か が ひと 目 で 分 か る よう に し て お きま す 。 

コメ ント に は 、「 行 コメ ント 」 と 「 ブ ロッ クコ メン ト 」 と いう 2 種類 の 書き 方 が あり ます 。 
ご ちら も 、 プ ログ ラム の 実行 時 に は 無視 され ます 。 


内 
代行 コメ ント 
行 コ メン ト は 、1 行 の コメ ント で す 。「//」 か ら 「 改 行 」 まで が コメ ント と 見 な され ます 。 
[「//」 は 行頭 に 書い て も いい で すし 、 行 の 途中 に 書い て も 構い ませ ん 。 


VHOH 只 S ナ テマ メロ 硫 


// 変数 の 宣言 
Var a = 2: // 変数 の 宣言 と 初期 化 


@ ブ ロッ クコ メン ト 


ブロ ッ ク コ メン ト は 、 複 数 行 に わた っ て 使え る コメ ント で す 。「/*」 か ら 「*/] まで が 
コメ ント と 見 な され ます 。「/*] は 行頭 に 書い て も 、 行 の 途中 に 書い て も 構い ませ ん 。 


/* ここ と から が コメ ント 
変数 の 宣言 */ 
var a = 2: /* 変数 の 宣言 と 初期 化 */ 
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Lesson 4 ピコ 
ルー 


SECTION 


8 JavaScript で は 、 デ ー タ の 種類 の こと を デー タ 型 と いい ます 。 





デー タ 型 に は 「 単 純 な も の 」 と 「 複 合 し た も の 」 と 「 特 殊 な も の ]」 
が あり ます 。 


人 @ 単純 デー タ 型 


単純 デー タ 型 と いう の は 、1 つの 変数 に 1 個 の デー タ を 入れ る 場合 の デー タ の 種類 で 、 
すでに 学ん だ 数 値 、 文 字 列 、 論 理 値 の 3 つが あり ます 。 単純 デー タ 型 は 他 に も 、 プ リ ミ 
ティ ブ デ ー タ 型 、 プ ライ マリ デー タ 型 、 基 本 デー タ 型 な ど と も 呼ば れ ま す 。 


人 @ 複合 デー タ 型 


JavaScript で は 、1 つの 変数 に 複数 の デー タ を 入れ る こと も で きま す 。 そ の 場合 に 
は 複合 デー タ 型 を 使い ます 。 複合 デー タ 型 と いつ の は 、 デ ー タ 1 個 1 個 の 種類 を 指す の 
で は な ぐ く 、 複 数 の デー タ を まとめ て お く た め の 構造 の こと を 指し ます 。 複合 デ ー タ 型 に 
は 、 こ の あと 学ぶ 配列 て と オブ ジェ クト が あり ます 。 複合 デー タ 型 は 参照 型 と も 呼ば れ ま 
す 。 


人 @ 特殊 な デー タ 型 


その 他 に 、 上 の 2 つ に 含ま れ な い 特 殊 な デー タ 型 が あり ます 。null と undefined で 
す 。 こ の あと の 1-6-3 で 学び ます 。 


複合 
デー タ 型 












配列 
オブ ジェ クト 





null 
undefined 


1 Day 3 きき レバ 





Lesson 





デー タ の 種類 (の 一 一 配列 


この レッ スン で は 、1 つの 変数 で 複数 の デ 
ー タ を まとめ て 管理 で きる し くみ の 1 つ で 
ある 、 配 列 に つい て 学び ます 。 





変数 に 複数 の デー タ を 代入 する 方 法 
配列 の し くみ 
先頭 の 要素 を 削除 する shift() メソ ッ ド 
先頭 に 要素 を 追加 する 
unshift() メ ソ ッ ド 
5 末尾 の 要素 を 削除 する pop() メソ ッ ド 
6 未 尾 に 要素 を 追加 する 

push() メ ソ ッ ド 
7 要素 を 削除 する splice() メ ソ ッ ド 
8 配列 の 長 さ を 調べ る length プロ パテ ィ 


旨 


や の NO 一 
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……: 変数 に 複数 の デー タ を 
ょ 4 代入 する 方 法 
2 1 つの 変数 に は 、 複 数 の デー タ を 代入 する こと も で きま す 。 複数 


の デー タ を 代入 する に は 、 配 列 と いう し くみ か 、 オ ブ ジ ェクト と 
いつ し くみ を 使い ます 。 





@ 1 つの 変数 で 複数 の デー タ を 管理 で きる 


前 の レッ スン で は 、1 つの 変数 で 1 つの デー タ を 管理 する 方 法 を 学び まし た 。 し か し 、 
デー タ の 数 が 増え て くる と 、 そ れ ぞ れ の デー タ に 変数 を 1 つ す つづ 用 意 し て いた の で は 、 
管理 が わずらわし く な っ て きま す 。 関連 する 複数 の デー タ は 、 ま と め て 1 つの 変数 で 管 
理 で きれ は 効率 的 で す 。 

JavaScript で は 、1 つの 変数 で 複数 の デー タ を まとめ て 管理 する し くみ が 用 意 さ れ 
て いま す 。1 つ は 配列 、 も う 1 つ は オブ ジェ クト で す 。 


人 @ 配列 て と オ ブ ジ ェクト の イメ ー ジ 


詳し い 説 明 は あと に 譲る と し て 、 ま ず は 配列 と オブ ジェ クト を 簡単 な お イメー ジ で 表し 
て の み ま す 。 そ ぞ それぞれ どの よう な も の か 、 だ いた い の イ メー ジ を つか ん で お いて くだ さい 。 





配列 の イメ ー ジ オブ ジェ クト の イメ ー ジ 


レル 








Lesson 人 mh 





。 。 . 配列 の し くみ Ma 


SECTION 


配列 を 使う と 、1 つの 変数 に 複数 の デー タ を 代入 する こと が で き 
2 ます 。 配列 は 、 同 じ 種類 の デー タ を まとめ て 扱う つの に 向い て いま 
す 。 





人 @ 配列 と は ? 


配列 と は 、1 つの 変数 に 複数 の デー タ を まとめ て 入れ られ る し くみ の 1 つ で す 。 変数 
を 1 つの 箱 だ と する と 、 そ の 箱 の 中 に 、 別 の 箱 が いく つも つなが っ て 入っ て いる よう な 
イメ ー ジ で す 。 こ の 箱 の 中 の 箱 全体 を 配列 て と いい ます 。 


和信 て CS き 本 区 | CT 


配列 の し くみ 





配列 の それ ぞ れ の 箱 を 要素 と いい 、 こ の 中 に デー タ を 代入 で きま す 。 

要素 に は 自動 的 に 、 先 頭 か ら 順番 に 番号 が 振ら れ て いて 、 こ の 番号 を イン デック ス ( ま 
た は 添え 字 ) と いい ます 。 

イン デック ス は 「0] か ら 始ま り ま す 。 1 番目 の 要素 の イン デック ス は 「0]、2 番 目 の 
要素 の イン デック ス は 「1」、 3 番目 の 要素 の イン デック ス は 「2」 と な り ま す 。 


@ 配列 の 作成 方 法 


変数 に 複数 の デー タ を 配列 て と し て 代入 する に は 、 大 カッ コ ([ ]) と カン マ (.) を 使っ て 、 
この よう に 書き ます 。 
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志 構文 : 配列 の 代入 文 


変数 名 =[ デー タ 1 デー タ 2 , デー タ 3] : 





これ で 変数 の 中 に は 配列 が 用 意 さ れ 、 デ ー タ は 先頭 か ら 順 番 に 要素 に 代入 され ます 。 
配列 の 各 要 素 に は 、 数 値 、 文 字 列 、 論 理 値 な ど を 代入 で きま す 。 


人 @ 配列 に 数 値 を 代入 し て みる 


た と えば 、 変 数 の 宣言 と 同時 に 3 つの 数 値 を 配列 と し て 代入 する 場合 は 、 こ の よう に 
書き ます 。 


Var year = [11, 13, 17]: 


配列 に 数 値 を 代入 





Ei 清 
@|@(@| 


人 @ 配列 に 文字 列 を 代入 し て みる 


3 つの 文字 列 を 配列 て と し て 代入 する 場合 は 、 そ れ ぞ れ の 文字 列 を クオ ー ト で 囲み ます 。 
た と えば 、 す で に ある language と いつ 変数 に [日 本 語 ] 「 中 国語 」 「 韓 国語 」 と いう 文字 
列 を 要素 と し て 持つ 配列 を 代入 する に は 、 こ の よう に 書き ます 。 


1anguage = [' 日 本 語 ', ' 中 国語 ', ' 韓 国語 ']: 


配列 に 文字 列 を 代入 












@@ 配列 に 論理 値 を 代入 し て みる 








3 つの 論理 値 を 配列 と し て 代入 する に は 、 true や false を カン マ で 区 切っ て 書き ます 。 Lesson 
check = [true, false, true] : ム ム 
配列 に 論理 値 を 代入 「2 | 
列 
の 
MEMO ッ 
同じ 配列 に 、 異 な る 種類 の デー タ を 代入 する こと も で きま す 。 た と えば 、 イ ン デ ックス が 0 の 要 み 
素 に 数 値 、1 の 要素 に 文字 列 、2 の 要素 に 論理 値 を 代入 し て も か まい ませ ん 。 た だ 、 配 列 は 同じ 種 
類 の デー タ を まとめ て 管理 する の に 適し た デー タ 型 で す の で 、 実際 の プロ グラ ム で は 、 異な る デ 
ー タ 型 の デー タ を 格納 する こと は あま りあ り ま せん 。 
人 @ 配列 の 要素 を 指定 し て デー タ を 代入 する に は ? 
配列 に 入れ て ある デー タ は 、1 つ す つ 個 別に 出し 入れ で きま す 。 配列 の 要素 を 指定 す 
れ ば 、 デ ー タ を 代入 し た り 、 参 照 し た り で きま す 。 要素 を 指定 し て 代入 や 参照 を する と 
き に は 、 配 列 が 入っ て いる 変数 名 と イン デック ス を 使い ます 。 
萌 配列 の 各 要素 の 指定 の し か た 
配列 が 入っ た 変数 名 [ イン デック ス ] 
た と えば 、 変数 year の 中 に ある 配列 の 先頭 か ら 2 番目 の 要素 に 、「20] と いつ 数 値 を 
代入 し た いと き に は 、 こ の よう に 書き ます 。 
year[1] = 29: 
3psy ct の 1 
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@@ 配列 の 要素 を 参照 する に は ? 


配列 の 要素 を 参照 する に は 、 先 ほど と 同じ く 、 変 数 名 と 大 カッ コ と イン デック ス を 使 
いま す 。 た と えば 、a と いつ 変数 に 要素 の デー タ を 代入 し た いと き に は この よう に 書き 
ます 。 


a = year[ 1]: 


1 つの 変数 の 中 に は 、 配 列 は 1 つ し か 入れ られ ませ ん 。 
よって 、 配 列 が 入っ て いれ ば 、 変 数 = 配列 と いう こと 
に な り ま す 。 今 後 、「 配 列 が 入っ て いる 変数 」 は 略し 
て 「 配 列 }] と だ け 呼ぶ こと に し ます 。「 配 列 名 」 と い 
つっ た 場合 は 、「 配 列 が 入っ て いる 変数 名 ] を 意味 し ます 。 


配列 の 要素 に は 、 数 値 、 文 字 列 、 論 理 値 だ け で な く 、 
配列 や オブ ジェ クト 、 さ ら に は 関数 で さえ も 代入 する 
こと も で きま す (オブ ジェ クト に つい て は 1-6、 関 数 
に つい て は 2-3 で 説明 し ます )。 


変数 に 配列 を 代入 する に は 、 new Array と いう 構文 
を 使う こと も で きま す (2-4-5 参 照 )。 


1psy 3 3 と 





Day 





sses 先頭 の 要素 を 削除 する 
4 Shift() メソ ッ ド 


SECTION 


ビ 
の 
の 
の 
O 
コ 


と か ら 要 素 を 削除 し た り 、 追 加 し た り 、 い ろ い ろ な 使い 方 が で き 
ます 。 


1 配列 は た だ デー タ を 代入 し た り 参 照 し た りす る だ け で は な く 、 あ 





@@ 先頭 の 要素 を 削除 する に は ? 


配列 の 先頭 の 要素 を 取り 除く に は 、shift() メ ソ ッ ド を 使っ て 、 こ の よう に 書き ます ( メ 
ソ ッ ド と は 何 か に つい て は 1-6-1 で 説明 し ます )。 


朝 構文 : shiftO) メソ ッ ド 


配列 名 . shift( ) 


@ shift() メソ ッ ド を 使っ た サン プル 


以下 の ソー スコ ー ド は 、shift() メ ソ ッ ド を 使っ た サン プル で す 。 配列 h に デー タ を 代 
入 し (1 行 目 ) 、 先 頭 の 要素 を 削除 し た あと (2 行 目 ) 、 各 要素 の デー タ を 警告 ダイ アロ グ 
ボッ クス で 表示 し て いま す 3 行 目 )。 


こく X OHIUS の iel 節 札 時 源 彰 S 還 区 | を 半 


1 var h = [19, 29, 39]: 
2 「 RsshHFE()$ 
3 ! window.alert(h[9] + リ ,"+ h[1] + 「」 ォ h[21): 


替 shiftO メソ ッ ド の 動作 イメ ー ジ 





Sshift() 先頭 の 要素 が 削除 され る 


3psy GOAL 
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"sns 先頭 に 要素 を 追加 する 
4 UnShift() メソ ッ ド 


配列 の 先頭 に 要素 を 追加 する に は 、unshift() メソ ッ ド と いう も 
の を 使い ます 。 





@ 先頭 に 要素 を 追加 する に は ? 


配列 の 先頭 に 要素 を 追加 し て デー タ を 代入 する に は 、unshift() メ ソ ッ ド を 使っ て 、 
この よう に 書き ます 。 


臣 構文 : unshiftO) メソ ッ ド 


配列 名 .unshift( 代入 する デー タ ) 


@ unshift() メソ ッ ド を 使っ た サン プル 


以下 の ソー スコ ー ド は 、unshift) メソ ッ ド を 使っ た サン プル で す 。 配列 1 に デー タ 
を 代入 し (1 行 目 ) 、 先頭 の 要素 を 追加 し て 「10」 を 代入 し た あと (2 行 目 ) 、 各 要 素 の デー 
タ を 警告 ダイ アロ グ ボ ックス で 表示 し て いま す (3 行 目 )。 


1 var h = [29, 39]: 
2 ji h.unshift( 19) : 
3 window.alert(h[9] + "。"+ h[1] + エネ 2 


宝 unshiftO) メソ ッ ド の 動作 イメ ー ジ 


4 東 .』 ネ 」 





人 
9) 
す 
人 ら 
人 ⑮ 
@| 


4 
unshift() 先頭 に 要素 が 追加 され る 
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-*ss 未 尾 の 要素 を 削除 する 
bh DODU メソ ッ ド 


SECTION 





配列 の 未 尾 の 要素 を 削除 する に は 、pop() メソ ッ ド と いう も の を 
に 議 5 
@ 未 尾 の 要素 を 除去 する に は 


配列 の 未 尾 の 要素 を 取り 除く に は 、pop() メソ ッ ド を 使っ て 、 こ の よう に 書き ます 。 


朝 構文 : pop() メソ ッ ド 


配列 名 .pop( ) 


で poD() メソ ッ ド を 使っ た サン プル 


以下 の ソー スコ ー ド は 、pop() メソ ッ ド を 使っ た サン プル で す 。 配列 ロ に デー タ を 代 
入 し 1 行 目 )、 未 尾 の 要素 を 取り 除い た あと (2 行 目 ) 、 各 要素 の デー タ を 警告 ダイ アロ 
グ ボ ックス で 表示 し て いま す (3 行 目 ) 。 


1 ! var h = [16, 29, 39]: 

2 」 h.pop(): 

3 j window.alert(h[9] + '。"+ h[1] + リリ + h[2]): 
世 popO メソ ッ ド の 動作 イメ ー ジ 


* 
poD() 未 尾 の 要素 が 取り 除 か れる 





3psy 


ci 
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es 末尾 に 要素 を 追加 する 
4 Dush() メソ ッ ド 


SECTION 


配列 の 未 尾 に 要素 を 追加 する に は 、push() メソ ッ ド と いう も の 
を 使い ます 。 





@ 未 尾 に 要素 を 追加 する に は ? 


配列 の 未 尾 に 要素 を 追加 し て デー タ を 代入 する に は 、push() メソッド を 使っ て 、 こ 
の よう に 書き ます 。 


朝 構文 : Dush() メソ ッ ド 


配列 名 .push( 代入 する デー タ ) 


@ push() メソ ッ ド を 使っ た サン プル 


以下 の ソー スコ ー ド は 、push() メ ソ ッ ド を 使っ た サン プル で す 。 配列 ロ に デー タ を 
代入 し (1 行 目 )、 未 尾 に 要素 を 追加 し て 「30] を 代入 し た あと (2 行 目 )、 各 要素 の デー 
タ を 警告 ダイ アロ グ ボ ックス で 表示 し て いま す (3 行 目 ) 。 


1 j var h = [19, 29]: 
2 , h.push(39): 


3 , window.alert(h[9] + "」)+ h[1] +「」) + h[2]): 


堆 push() メソ ッ ド の 動作 イメ ー ジ 


4 0 4 1 し 


人 | * 
4 gem 
puSh() 未 尾 に 要素 が 追加 され る 
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-sss 要素 を 削除 する 
4 SDlice() メソ ッ ド 


7 配列 の 要素 を 削除 する に は 、splice() メソ ッ ド と いう も の を 使い 





ます 。 


人 @ 配列 の 要素 を 削除 する に は ? 


配列 の どれ か が 要素 を 指定 し て 削除 する に は 、splice() メ ソ ッ ド を 使っ て 、 こ の よう 
に 書き ます 。 


宇 構文 : splice() メソ ッ ド 
配列 名 . sp1ice( イン デック ス , 削除 する 要素 の 数 ) 








@ splice() メソ ッ ド を 使っ た サン プル 
以下 の ソー スコ ー ド は 、 splice() メ ソ ッ ド を 使っ た サン プル で す 。 配列 h に デー タ を 


代入 し 1 行 目 )、2 番 目 の 要 素 か ら 2 つ の 要素 を 削除 し た あと (2 行 目 )、 各 要素 の デー 
タタ を 警告 ダイ アロ グ ボ ックス で 表示 し て いま す (3 行 目 )。 


1 var h = [19, 29, 39]: 
の 身 2SDHH ま GS( は 。 25 
3 , window.alert(h[9] + "」)+ h[1] +「」)+ h[2]): 


再 構文 : Splice() メソ ッ ド の 動作 イメ ー ジ 


9 イオ ミコ 014.34 イッ テッ < を 含め 、 
人 W@@|・ 介 | 


SDlice() 
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-ess 。 四 ロ 列 の 長 さ を 調べ る 
ぉ < length プロ バテ ィ 


SECTION 


配列 の 長 さ を 調べ る に は 、length プロ パテ ィ と いう も の を 使い 
ます 。 





@ 配列 の 長 さ (要素 数 ) を 調べ る に は ? 


要素 を 追加 し た り 削 除 し た り し て いる うち に 、 い まい っ た い 要 素 の 数 は いく つ あ る の 
か 、 わ か ら な く な る こと も あり ます 。 そ ん な と き は 配列 の 長 さ を 調べ ます 。 配列 の 長 さ 、 
すなわち その 配列 に は いく つ 要 素 が ある の か を 調べ る に は 、length プロ バテ ィ を 使い 
ます (プロ パテ ィ に つい て は 1-6 で 説明 し ます ) 。 


芝 構文 : length プロ パテ ィ 


配列 名 .1ength 


@ Ilength プロ バテ ィ を 使っ た サン プル 


以下 の ソー スコ ー ド は 、length プロ パテ ィ を 使っ た サン プル で す 。 配列 h に デー タ 
を 代入 し (1 行 目 ) 、 要 素 の 数 を 警告 ダイ アロ グ ボ ックス で 表示 し て いま す (3 行 目 )。 


1 var h = [19, 29, 39]: 
2 ij window.alert(h.1ength) : 


零 length プロ パテ ィ の 動作 イメ ー ジ 


要素 の 数 を 調べ られ る 





length 


IED 人 アリ 
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Lesson 





デー タ の 種類 ⑤ 
ーー オプ ジ エ ク タク ト 
この レッ スン で は 、1 つの 変数 で 複数 の デ 


ー タ を 管理 で きる も う 1 つ の し くみ で ある 
オブ ジェ クト に つい て 学び ます 。 





1 オブ ジェ クト の し くみ 
2 オブ ジェ クト の 使い 方 
3 2 つの 特殊 な デー タ 型 


II 


デオ ブ ジ ェクト の し くみ 


SECTION 





オブ ジェ クト と は 、 変 数 の 中 に 入っ た 変数 の こと で す 。1 つの 変 
数 で 、 違 う 種 類 の 複数 の デー タ を まとめ て 管理 する の に 適し て い 
ます 。 


オブ ジェ クト と は ? 


変数 に は 、 デ ー タ を 直接 入れ る 以外 に 、 変 数 も 入れ る こと が で きま す 。 オ ブ ジ ェクト 
と いつ の は 、 ひ と こと で 言え ば 、 変 数 の 中 に 入れ られ た 変数 、 す な わ ち 「 変 数 in 変数 
の こと で す 。「 変 数 in 変数 ] は いく つ で も 作る こと が で き 、 全 部 まとめ て 1 組 の オブ ジェ 
クト で す 。 


専 オブ ジェ クト の し くみ 






プロ パテ ィ 


変数 の 中 の 変数 は 、「 変 数 ] と は 呼び ませ ん 。 プ ロ パ ティ と いい ます 。 プ ロ パ ティ に 
は それ ぞ れ プロ パテ ィ 名 を 付け て 、 デ ー タ を 入れ て 管理 し ます 。 プ ロ パ ティ 名 の 付け 方 
は 、 変 数 名 と 同じ 規則 に 従い ます 。 

また 、 プ ロ パ ティ に は 、 デ ー タ で は な ぐ く 、 関 数 を 入れ る こと も で きま す 。 関数 が 入っ 
た プロ パテ ィ の こと を 、 メ ソ ッ ド と いい ます (関数 は 2-3 で 説明 し ます ) 。 





人 @ 配列 と オブ ジェ クト の 違い 


1 つの 変数 で 複数 の デー タ を 管理 する し くみ と いえ ば 、 前 の レッ スン で 配列 を 学び ま 
し た 。 配列 と 違 つ の は 、 配 列 の 要素 箱 は 1 列 に 並ん で いて 、 自 動 で 先頭 か ら 順 番 に 番号 
が 振ら れ て いた の に 対し て 、 オ ブ ジ ェクト の プロ パテ ィ 箱 は 順番 に は 並ん で いま せん し 、 
番号 も 振ら れ て いま せん 。 


志 配列 エプロ パテ ィ の 違い 





オブ ジェ クト 


$ オ ブ ジ ェクト の 作成 方 法 


変数 の 中 に オブ ジェ クト を 作る に は 、 こ の よう な 書き 方 を し ます 。 
補 醒 文 オブ ジェ クト の 代入 文 
変数 名 = { 


プロ パテ ィ 名 1: 
プロ パテ ィ 名 2: 


プロ パテ ィ 名 3: 
} ぅ 





プロ パテ ィ 名 は プロ グラ マ が 考え て 付け ます 。 名 前 の 付け 方 の 規則 は 、 変 数 名 と 同じ 
で す 。 こ うつ する こと で 、 変 数 の 中 に プロ パテ イィ が 作ら れ 、 そ の 中 に デー タ が 代入 され ます 。 


(や : や . の あと に 半角 スペ ー ス や 改行 を 入れ て いま す が 、 見 た 目 の 問題 で す の で 、 改行 や スペ ー 
ス な し で 書い て も か まい ませ ん 。 


た と えば 、 変 数 today の 中 に 、 プ ロ パ ティ を 3 つ 持 つ オ ブ ジ ェクト を 作っ て 、 そ れ ぞ 
れ 「 年 ] 「 月 ] 「 日 ] を 表す 数 値 を 代入 し た いと し ます 。 こ の 場合 は 、 ソ ー ス コー ド は この 
よう に 書き ます 。 


Day 








ビ 
の 
の 
の 
O 
コ 


MM 攻 に 


2 


和信 て 9 ブナ VH 
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var today = { 
1 year: 2914, 
month: 7,。 

| day: 25 

し すう 





mm OO DO 一 


オブ ジェ クト が 作ら れ た 


プロ バテ ィ ご と に 異な る デー タ も 代入 で きる 
オブ ジェ クト は 、 プ ロ パ ティ ご と に 異な る 種類 の デー タ も 代入 で きま す 。 

| var company = { 

, name: "ソシム 『'。 // 文字 列 を 代入 
estab1ish: 1994, // 数 値 を 代入 

mai1: true // 論理 値 を 代入 

| 5 


company 


それ ぞ れ の プロ パテ ィ に 
異な る 種類 の 値 を 代入 





の お OO DO 一 


オブ ジェ クト は 入れ 子 に で きる 


オブ ジェ クト の プロ パテ ィ の 中 に は 、 直 接 デ ー タ を 入れ る 以外 に 、 さ ら に 別 の オブ ジェ 
クト を 入れ る こと も で きま す 。 た と えば 、address プロ パテ ィ の 中 に 、code プロ パテ ィ 
と city プロ パテ ィ で 構成 され る オブ ジェ クト を 作る に は 、 こ の よう に 書き ます 。 








1 , var company = { company 

2 」 。 name: "ソシム 「。 

3 address: { 

4 code: '191- の 964' , 

5 city: 'Tokyo' 

6 。 

ni。 拉 

入れ 子 に な っ た オブ ジェ クト の イメ ー ジ 

ゆ ご 3 ミ き レア 
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オブ ジェ クト を 図解 す る に は 樹 形 図 を 使う 


入れ 子 に な つた オブ ジェ クト の 構造 は 、 よ く 樹 形 図 (ツリ ー 図 ) を 使っ て 表 さ れ ま す 。 
た と えば 、 変 数 company に 入っ て いる オブ ジェ クト は 、 樹 形 図 で 表す と この よう に な 
り ま す 。 


補 オブ ジェ クト を 表す 樹 形 図 













company 
オブ ジェ クト 


Tname 
プロ パテ ィ 


addreSSs 


M プロ パテ ィ | 







変数 company 





address 
オブ ジェ クト 


code 
プロ パテ ィ 





オブ ジェ クト の 階層 構造 や 、 そ れ を 表し た 樹 形 図 の こ 
と を 、 オ ブ ジ ェクト ツリ ー と いう こと が あり ます 。 


オブ ジェ クト の 名 前 は 、 そ の オブ ジェ クト が 入っ て いる 変数 の 名 前 や 、 プ ロ パ ティ の 
名 前 を 使い ます 。 

た と えば 、company と いつ 変数 に 入っ て いる オブ ジェ クト の 名 前 (オブ ジェ クト 名 ) 
は 、company に な り ま す 。 ま た 、 address と いう プロ パテ ィ に 入っ て いる オブ ジェ ク 
ト の 名 前 は address に な り ま す 。 


1 つの 変数 (プロ パテ ィ ) の 中 に は 、 オ ブ ジ ェクト は 
1 組 し か 入れ られ ませ ん 。 よ っ て 、 オ ブ ジ ェクト が 入 
っ て いれ ば 、 変 数 (プロ パテ ィ ) = ニオブ ジェ クト と い 
つこ と に な り ま す 。 

今後 「 オ ブ ジ ェクト が 入っ て いる 変数 (プロ パテ ィ )」 
は 略し て 「 オ ブ ジ ェクト 」 と だ け 呼 ぶ こ と に し ます 。 「 オ 
ブ ジ ェクト 名 」 と いっ た 場合 は 、「 オ ブ ジ ェクト が 入 
っ て いる 変数 名 (ある い は プロ パテ ィ 名 )」 を 意味 し 
ます 。 


Day 





Lesson 


AN 区 | @99 


7/ 
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ーー 


2 
Lesson 6 


。 。 . オブ ジェ クト の 使い 方 


SECTION 


プロ パテ ィ に 入っ て いる 値 を 参照 し た り 、 上 書き し た り 、 あ と か 
2 ら プ ロ パ ティ を 追加 し た りす る 方 法 を 学び ます 。 





プロ バテ ィ の 値 を 参照 する に は ? 


プロ パテ ィ の 値 を 参照 する に は 、 オ ブ ジ ェクト 名 と ピリ オド (.) と プロ パテ ィ 名 を 使っ 
て この よう に 書き ます 。 


報 プロ バテ ィ の 値 の 参照 方 法 


オブ ジェ クト 名 . プロ パテ ィ 名 


た と えば 、company オ ブ ジ ェクト の name プロ パテ ィ の 値 を 参照 し て 、 警 告 ダ イア 
ログ ボッ クス に 表示 する ソー スコ ー ド は 、 こ の よう に 書き ます 。 


1 「 var company = { 
2 name: "ソシム 「。 
3 address: { 

4 code: '191-9964', 
5 city: 'Tokyo' 
6 ! } 

Mi 

8 


| 92 


window.al1ert( company -name) 










Code 
プロ パテ ィ 








入れ 子 に な つて いる オブ ジェ クト の プロ パテ ィ 値 を 参照 する に は 、 ピ リオ ド (.) で プ 
ロ パ ティ 名 を つなげ て いき ます 。 

た と えば 、company オ ブ ジ ェクト の address プロ パテ ィ に 入っ て いる 、 address Lesson 
オブ ジェ クト の code プロ パテ ィ の 値 を 参照 し て 、 警 告 ダ イア ログ ボッ クス に 表示 する 
に は 、 こ の よう に 書き ます (8 行 目 に 追加 ) 。 





8 , window.alert(company . address .code ) : 






company.address.code 


NN 区 | 2 





変数 company 


ケ 


半 ン 浴 ら ナ yHN 







COde 
プロ バテ ィ 


city 
プロ パテ ィ 


プロ バテ ィ の デー タ を 上 書き する に は ? 


プロ パテ ィ に 入っ て いる デー タ を 、 別 の デー タ で 上 書き する に は 、 先 ほど と 同じ く 、 
ピリ オド (.) を 使っ て プロ パテ ィ を 指定 し て 、 新 た な デー タ を 代入 し ます 。 


addreSSs 
プロ パテ ィ 





8 , company.name = ' 任天堂": 
9 : company.address.code = '691-8116' 


10 ! company.address.city = "Kyoto' 


あと か ら プ ロバ ティ を 追加 する に は ? 


「 オ ブ ジ ェクト 名 . プ ロ パ ティ 名 」 の 書き 方 を 使っ て 、 存在 し て いな い プ ロ パ ティ 名 を 
指定 し て デー タタ を 代入 すれ ば 、 新 し い プ ロ パ ティ を 作成 し て 追加 する こと が で きま す 。 

た と えば 、company オ ブ ジ ェクト に yomigana と いう 新た な プロ パテ ィ を 追加 し て 、 
"ニン テン ドウ "と いつ 文字 列 を 代入 する に は 、 こ の よう に 書き ます 。 


11 ! company.yomigana = "ニン テン ドウ " ぅ 
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し 


Lesson 6 


。 。 。 の つの 特殊 な テー タ 型 


SECTION 


論理 値 、 配 列 、 オ ブ ジ ェクト 以外 に 、 も う 2 つ 、 特 殊 な デー タ 型 


う JavaScriDt の デー タ の 種類 に は 、 これ まで 学ん だ 数 値 、 文字 列 、 
が あり ます 。 最後 に 、 そ の 2 つ に つい て 説明 し て お きま す 。 





@ 値 が な いこ と を 表す null 


null (ヌル ) は 、 変 数 や プロ パテ ィ の 中 に 、 デー タ が な いこ と を 表す 値 で す 。 た と えば 、 
以下 の よう な オブ ジェ クト を 作成 する 際 に 、 電 話 が な い 会 社 の 場合 は 、phone プロ パ 
ティ に null を 代入 し て お く 、 と いう よう に 使い ます 。 





1 var company = { JavaScript の アラ ー ト 
2 ! BIG ジジ ング ベ 二 ml | 
3 ( phone: nu11 

3 

5 1 window.alert(company .phone): 


@ 存在 し な い 変数 、 要 素 、 プ ロバ ティ を 表す 
undefined 
undefined (アン デフ ァ イ ン ド ) は 、 存在 し て いな い 変 数 や 、 要 素 、 プ ロ パ ティ を 使 


お つと し た と き に 表示 され る 値 で す 。 た と えば 、company オ ブ ジ ェクト に は url と い 
うつ プロ パテ ィ は 存在 し ませ ん の で 、company.url を 表示 する と 、undefined に な り ま す 。 








JavaScript の アラ ー ト 
5 ! window.a1ert(company .ur1) : Soon 
undefined | 
L\ | 
終 1 
わ 日 
り 目 
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Lesson 


秒 件 文 


この レッ スン で は 、 処 理 手順 の 順番 を 変え 
た いと き に 使う 条件 文 の し くみ と 使い 方 を 
学び ます 。 


条件 文 1 文 

条件 文 ⑦② 一 - if else 文 

条件 文 3 一 - if 一 else if else 文 
条件 文 ④ 一 - switch 文 
条件 の 書き 方 


の い お OO OO 一 


ーー 
Lesson 1 


。 。 .。 案件 文 ひ 一 一 if 文 


SECTION 


1 つ 目 の 炒 件 文 は if 文 で す 。if は 英語 で 「 も し 一 な ら 」 と いう 意 
1 味 で す が 、JavaScript で も 同じ 意味 合い で 使わ れ て いま す 。 





人 @ if 文 の 書き 方 


if 文 は 、 条 件 に よっ て 、 あ る 処理 を 実行 する か し な い が 選 択 し て 、 処 理 の 流れ を 分 岐 
一 構文 : 文 


させ た いと き に 使う 構文 で す 。 
if (条件 ) { 条件 が true の と き は 
処理 処理 を 実行 する 
} 


務 件 が 成り 立つ と き (true の と き ) は 、 処 理 を 実行 し ます 。 逆 に 、 条 件 が 成り 立た な 
いと き alse の と き ) は 、 処 理 を 実行 せ ず に スキ ッ プ し ます 。 





人 @ if 文 の サン プル プロ グラ ム 


サン プル プロ グラ ム を 使っ て 、 実際 に if 文 の 動作 を 確認 し て み ま し ょ う 。 以下 の ソー 
スコ ー ド を 入力 し て 、 実行 し て みて くだ さい 。 


! var n= window.prompt( "数値 を 1 つ 入 力 し て くだ さい 「): 


1 

2 ! if (n==3) { 

3 , window.alert(" 入力 し た 数 値 は 3 で すね "): 
4 


に 


実行 する と 、 入 力 ダ イア ログ ボッ クス が 表示 され ます 。 


ンー 
皿 加 い 
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レー 3 
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Javascript 


入力 欄 に 「3」 と 入力 





数 値 を 1 つ 入力 し て くだ さい 





Lesson 











OK キャ ン セ ル 


























この 入力 欄 に 「3」 と 入力 する と 、 警 告 ダ イア ログ ボッ クス が 表示 され ます 。「OK」 ボ 
タン を クリ ッ ク す れ ば 、 プ ログ ラム は 終了 し ます 。 





JavaScript の アラ ー ト 





吐 オーー の 対 栓 展 | ー ト 


ダイ アロ グ ボ ックス が 表示 され る 
入力 し た 数 値 は 3 で すね 
この ペー ジ で これ 以上 ダイ アロ グ ボ ックス を 生成 し な い 
MEMO 
(*] | 請 二 時 
この 本 の 学習 中 は 、 チ ェ ッ クボ ックス は クリ ッ 
ク し な いで くだ さい 。 
サン プル プロ グラ ム の 解説 


まず 、 入 力 ダ イア ログ ボッ クス の 入力 欄 に 入力 され た 数 値 が 、 変 数 n に 代入 され ます 
(1 行 目 )。 if 文 の 条件 は 「n ニ = 3]、 す な わ ち 「n は 3 と 等 し い ] で す (2 行 目 ) 。 変数 n の 
値 が 3 な ら 、「n は 3 と 等 し い 」 の で 条件 が 成り 立ち (true) 、 警 告 ダ イア ログ ボッ クス が 
表示 され ます (3 行 目 ) 。 

も し 変数 n が 3 で な けれ ば 、 条 件 が 成り 立た な い (false) の で 、 ダ イア ログ ボッ クス 
は 表示 され ず に 、 プ ログ ラム は 終了 と な り ま す 。 3 以外 を 入力 し て 、 試し こみ て くだ さ 
い ( 条 件 の 詳し い 書 き 方 は 、2-1-5 で 説明 し ます )。 


COLUMN 

ブロ ッ ク 

条件 の あと の 中 カッ コ (( と })) で 囲ま れ た 部 分 の こと を 、 ブ ロック (また は コー ドブ ロッ ク ) と い 
いま す 。 ブ ロッ ク の 中 に は 、 複 数 の 文 を 処理 と し て 書く こと が で きま す 。 

処理 に あたる 文 が 1 つの と き は 、 中 カッ コ を 省略 し て も 大 丈夫 で す が 、 文 が 複数 ある と き は 、 必 
ず 中 カッ コ で 囲ん で 、 処 理 を ブロ ッ ク に し て くだ さい 。 

ブロ ッ ク の 中 の 文 は 、 改行 ご と に イン デン ト す る と 見 や すく な り ま す 。 ブ ロッ ク の 終わ り ()} の あ 
と ) に は 、 セ ミコ ロン は 書き ませ ん 。 


の 


-"eef 案件 文 ② 
ja 人 4、4 ーーif - else 文 


SECTION 


2 つ 目 の 条件 文 は 、if - else (イフ エル ス ) 文 で す 。else は 英 
の 語 で 「 そ れ 以 外 の 場合 は 」 と いう 意味 で す 。 





人 @ if else 文 の 書き 方 


felse 文 は 、i 文 の 条件 が 成り 立た な か っ た 場合 の 処理 を 、「 そ れ 以 外 の 場合 は 
(else)] と し て 付け 足し て 書き た いと き に 使う 構文 で す 。 


萌 構文 if 一 else 文 


if (条件 ) { 
処理 1 
} else { 


条件 次 第 で 


処理 1 が 処理 2 を 
実行 する 





処理 2 
) 





条件 が 成り 立つ と き (true の と き ) は 、 処 理 1 を 実行 し ます 。 逆 に 、 条 件 が 成り 立た 
な いと き (= false の と き ) は 、 処 理 2 を 実行 し ます 。 


@ felse 文 の サン プル プロ グラ ム 


サン プル プロ グラ ム を 使っ て 、 実際 に if else 文 の 動作 を 確認 し て み ま し ょ う 。 以 
下 の ソ ー ス コー ド を 入力 し て 、 実行 し て みて くだ さい 。 


1 ] Var n = window.prompt( ' 数 値 を 1 つ 入 力 し て くだ さい '): 
2 ! if(n == 3) { 

3 window.a1ert(" 入力 し た 数 値 は 3 で すね " ) : // 処理 1 

4 } el1se { 

5 ! window.a1ert(" 入力 し た の は ぅ 以外 で すね '): // 処理 2 
6 


s と に 


0 





f | 
|] 
| 











JavaScript の アラ ー ト の | 3 以外 を 入力 する と 
入力 し た の は 3 以外 で すね | 別 の ダイ アロ グ ボ ックス が 
この ペー ジ で これ 以上 ダイ アロ グ ボ ックス を 生成 し な い | 表示 され る 
L wlI 
サン プル プロ グラ ム の 解説 


まず 、 入 力 ダ イア ログ ボッ クス の 入力 欄 に 入力 され た 数 値 が 、 変 数 n に 代入 され ます 
(1 行 目 ) 。 条 件 は 「n = ニ = 3]、 す な わ ち 「n は 3 と 等 し い 」 で す (2 行 目 ) 。 変数 n の 値 が 3 
な ら 条 件 は true と な り 、「 入 力 し た 数 値 は 3 で すね 」 と いう 警告 ダイ アロ グ ボ ックス が 
表示 され て 、 プ ログ ラム は 終了 し ます (3 行 目 ) 。 


条件 が true の と き は 
所 処理 1 を 実行 する 


も し 変数 n に 3 以外 の 値 が 入力 され る と 、 条 件 は false と な り 、3 行 目 を スキ ッ プ し 、 
else (4 行 目 ) 以下 の 理 で ある 「 入 力 し た の は 3 以外 で すね ] と いう ダイ アロ グ ボ ッ ク 
ス が 表示 され て (5 行 目 )、 プ ログ ラム は 終了 と な り ま す 。 


条件 が falsSe の と き は 
処理 2 を 実行 する 


補 条件 が true の と き の 処理 の 流れ 





萌 条件 が false の と き の 処理 の 流れ 





ky 
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mr 条件 文 〇 ーー 


4、4 一 else if 一 else 文 


3 つ 目 の 条件 文 は 、if else if - else 文 で す 。 こ れ ま で に 学ん 
1 だ if else 文 を 複数 組み 合わ せ た 条 件 文 で 、 さ ら に 細か く 条 件 分 
岐 を させ た いと き に 使い ます 。 


@ if 一 else if ~ else 文 の 書き 方 


if 一 else if 一 else (イフ ・ エ ルス イフ ・ エ ルス ) 文 は 、 条 件 に よっ て 、 さ ら に 細か く 
実行 し た い 処 理 を 選択 し た いと き に 使う 構文 で す 。 


萌 構文 :i『 一 else if else 文 


if (条件 1) { 
処理 1 

} e1seif (条件 2) { 
処理 2 

) else { 
処理 3 

) 


条件 1 が true の と き は 、 処 理 1 を 実行 し ます 。 
条件 1 は false だ けれ ども 、 条 件 2 が true の と き は 、 処 理 2 を 実行 し ます 。 
条件 1 も 条件 2 も false の と き は 、 和 理 3 を 実行 し ます 。 





条件 次 第 で 


処理 1 が 処理 2 か 処理 3 を 
実行 する 





ED Cp 全 志 
ン 





@ felse if - else 文 の サン プル プロ グラ ム 


サン プル プロ グラ ム を 使っ て 、 実 際 に if else if else 文 の 動作 を 確認 し て み ま し ょ Lesson 
うつ 。 以 下 の ソ ー ス コー ド を 入力 し て 、 実行 し て みて くだ さい 、。 





1 “ var n = window.prompt( ' 数 値 を 1 つ 入力 し て くだ さい "): 

2 ! if (n ==3) { 

3 window.a1ert(' 入力 し た 数 値 は 3 で すね " ) : // 処理 1 

4 ! } ese if (n > 3) { 

5 : window.a1ert(" 入力 し た 数 値 は 3 より 大 きい で すね "): // 処理 2 
6 } else { 

7 “ window.a1ert(' 入力 し た の は 3 より 小さ いで すね 『" )  // 処理 3 
多 + 


@ け サンプ ルプ ログ ラム の 解説 


まず 、 入 力 ダ イア ログ ボッ クス の 入力 欄 に 入力 され た 数 値 が 、 変 数 n に 代入 され ます 
(1 行 目 ) 。 条 件 は 「n = ニ = 3]、 す な わ ち 「n は 3 と 等 し い 」 で す (2 行 目 ) 。 変数 n の 値 が 3 
な ら 条 件 は true と な り 、「 入 力 し た 数 値 は 3 で すね 」 と いう 警告 ダイ アロ グ ボ ックス が 
表示 され て 、 プ ログ ラム は 終了 し ます (3 行 目 ) 。 


理 条件 1 が true の と き の 処 理 の 流れ 


和文 esle 中 9Sle ニコ ーー@ 油 代 源 区 | 


条件 1 が true の と き は 
処理 1 を 実行 する 


も し 変数 n に 3 以外 の 値 が 入力 され る と 、 条件 1 は false と な り 、3 行 目 を スキ ッ プ し 、 
条件 2 (4 行 目 ) に 行き ます 。 

条件 2 は 「n > 3]、 す な わ ち 「n は 3 より 大 きい 」 で す (4 行 目 ) 。 変数 n の 値 が 3 より 
大 きい な ら 条 件 2 は true と な り 、「 入 力 し た 数 値 は 3 より 大 きい で すね 」 と いう 警告 ダ 
イア ログ ボッ クス が 表示 され て 、 プ ログ ラム は 終了 し ます (5 行 目 ) 。 
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蘭 条件 1 が false で 、 条 件 2 が true の と き の 処理 の 流れ 


条件 1 が false で 


条件 2 が true の と き は 
処理 2 を 実行 する 





も し 変数 n に 3 より 小さ い 数 値 が 入力 され る と 、 条 件 1、 条 件 2 は false と な り 、 3 一 
5 行 目 を スキ ッ プ し て 6 行 目 に 行き ます 。 そ し て 、else (G6 行 目 ) 以下 の 処理 で ある 「 入 
力 し た 数 値 は 3 より 小さ いで すね 」 と いう ダイ アロ グ ボ ックス が 表示 され て (7 行 目 ) 、 
プロ グラ ム は 終了 と な り ま す 。 
条件 1、 条 件 2 が false の と き の 処 理 の 流 


条件 1 と 条件 2 が false 
の と き は 
処理 3 を 実行 する 





人 @ else if ー は いく つ で も 重ね られ る 


一 else 一 else 文 の 「else if 一 」 は 複数 書く こと も 可能 で す 。 よ り 細 か く 条 件 分 岐 
する こと が で きま す 。 た と えば 、 先 の サン プル プロ グラ ム は 、 数値 以外 の デー タカ 入力 
され て も 「 入 力 し た の は 3 より 小さ いで すね 」 と いう ダイ アロ グ が 出 て し まう の で す が 、 
「else if 一 ] を も う 1 つ 使 えば (6 行 目 ) 、 数 値 以外 の デー タ が 入力 され た 際 に 、「 数 値 を 
入力 し て くだ さい 」 と いう ダイ アロ グ が 出る よう に 修正 する こと が で きま す 。 


!「 } elseif(n<3) { 


6 

7 , window.alert(" 入力 し た 数 値 は 3 より 小さ いで すね " )  // 処理 3 
Ban PeLSe^Xt 

9 window.a1ert( ' 数 値 を 入力 し て くだ さい " ): // 処理 4 

0 9 


lO 2psy 1 N , 


ae 


sm 条件 文 ④ 
ーーSWitch 文 1 











SECTION 
最後 の 条件 文 は Switch 文 で す 。 選択 肢 が 多い 場合 の 条件 分 岐 に 
4 よく 使わ れ ま す 。 
@ switch 文 の 書き 方 


Switch 文 は 、 複 数 の 選択 肢 の 中 か ら 、 条 件 に 合 つ 処理 を 選択 し て 実行 し た いと き に 
使 つ 構文 で す 。 条 件 が と りう る 値 が 多い と き に は 、 if - else if else 文 より も 簡潔 に 
書く こと が で きま す 。 


朝 構 文 : switch 文 


switch ( 条件 ) { 

case ラベ ル 1 : 
処理 1 
break: 

case ラベ ル 2 : 
処理 2 


oO1IAS 一 一 な 和 栓 激 | - ユ 


break: 
case ラベ ル 3 : 

処理 3 

break: 
defau1t : 
処理 4 





switch 文 は 、 条 件 の 値 と 、case の あと に 書か れ た 値 (ラベ ル ) を 、 上 か ら 順 番 に 比 
較 し て いき ます 。 条 件 の 値 に 一 致す る ラベ ル が あれ ば 、 そ の case の と ころ に ある 処 理 
を 実行 し ます 。 処理 の 中 に break 文 が あめ れ ば 、switch 文 の 実行 を 終了 し 、 次 の 文 に 移 
り ま す 。break 文 が な けれ ば 、 次 の case 文 が 続け て 実行 され て し まい 、 狙 つっ た よう な 
処理 の 選択 に か り ま せん 。 


3psy 


GOAL 
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一 致す る ラベ ル が な いと 、default 文 の 処理 を 実行 し ます 。default 文 が な けれ ば 、 
Switch 文 の 実行 を 終了 し 、 次 の 文 に 移り ます 。 
case の ラベ ル と 処理 は 、 い くつ で も 書く こと が で きま す 。 









ラベ ル 3 default 


介 switch 文 の サン プル プロ グラ ム 


サン プル プロ グラ ム を 使っ て 、 実際 に switch 文 の 動作 を 確認 し て み ま し ょ う 。 以下 
の ソー スコ ー ド を 入力 し て 、 実行 し て みて くだ さい 。 


1 | var n = window.prompt( ' 名 字 を 入力 し て くだ さい 『): 
2 switch (n) { 
3 ! case ' 佐 藤 ': 
8 window.alert( " 日 本 で 一 番 多 い 名 字 で すね "'): // 処理 1 
5 break: 
6 ! case "鈴木 ': 
La window.alert(" 佐藤 さん の 次 に 多い 名 字 で すね '): // 処理 2 
8 break: 
9 ! case 高橋" 
10 ! window.alert(' ベ スト 3 に ラン クイ ン し て ます ね "): // 処理 3 
人 break: 
12 defau1t : 
13 ! window.a1ert(" けっ こう 珍し い 名 字 で すね "): // 処理 4 
14 1 } 
人 サン プル プロ グラ ム の 解説 


変数 n に 入力 され た 値 が 「 佐 藤 ] なら 処理 1 が 実行 され ます 。「 鈴 木 ] な ら 処 理 2 が 、[ 高 
橋 ] な ら 処 理 3 が 実行 され ます 。 そ れ ら 以外 の 値 が 入力 され た 場合 は 、default の 処理 4 
が 実行 され 、switch 文 は 終了 し ます 。 











Lesson 1 ee 
。 。 . 案件 の 書き 方 nam 
SECTION 1 
条件 文 の 条件 で ある 条件 式 を 書く に は 、 比 較 演 算 子 や 論理 演算 子 
で を 使い ます 。 





人 @ 条件 式 と は ? 


条件 文 や 繰り 返し 文 の 条件 を 書く の に 使う 式 の こと を 、 条件 式 と いい ます 。 す で に サ 
ン ブ プル プロ グラ ム で 使っ た 「n == 3] や 「n > 3] や 「n く 3] が 条件 式 で す 。 こ の 条件 式 
の 中 の 「==」 「>」 「 く ] と いつ た 記号 の こと を 比較 演算 子 と いい ます 。 


SHOH 吸 S 栓 浴 区 


人 @ 比較 演算 子 


比較 演算 子 に は 、 以 下 の よ うな お 種類 が あり ます 。 
条件 式 が true に な る 場合 








こく 大 な り 右辺 の 値 が 左辺 の 値 よ り 大 きい と き 
< 大 な り イ コー ル 右辺 の 値 が 左辺 の 値 以 上 の と き 

クン 小 な り 右辺 の 値 が 左辺 の 値 よ り 小さ いと き 
> 小 な り イ コー ル 右辺 の 値 が 左辺 の 値 以 下 の と き 
三 喧 等 値 演算 子 左辺 と 右辺 の 値 が 等 し いと き 


! 三 不 等 値 演算 子 左辺 の 値 と 右辺 の 値 が 等 し く な いと き 
ニーー 厳密 等 価 演算 子 左辺 と 右辺 の 、 値 と デー タ 型 が 等 し いと き 
! 王 ニ 厳密 不 等 価 演算 子 | 左辺 と 右辺 の 、 少 な く と も 値 か デー タ 型 が 等 し く な いと き 


「<] を 使っ た 条件 式 で は 、 右 辺 の 値 が 左辺 の 値 よ り 大 きい と き 、 条 件 式 は true に な り 、 
等 し いか 小さ いと き に は false に な り ま す 。 

「 く =」 を 使っ た 条件 式 で は 、 右辺 の 値 が 左辺 の 値 よ り 大 きい か 、 ある い は 等 し いと き 、 
条件 式 は true に な り 、 小 さい と き に は false に な り ま す 。 

「>] を 使っ た 条件 式 で は 、 右 辺 の 値 が 左辺 の 値 よ り 小さ いと き 、 条 件 式 は true に な り 、 
等 し いか 大 きい と き に は false に な り ま す 。 
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「>=」 を 使っ た 条件 式 で は 、 右辺 の 値 が 左辺 の 値 よ り 小さ いか 、 ある い は 等 し いと き 、 
条件 式 は true に な り 、 大 きい と き に は false に な り ま す 。 

「=」 を 使っ た 条件 式 で は 、 左辺 と 右辺 の 値 が 等 し いと き 、 条 件 式 は true に な り 、 
等 し く な いと き は false に な り ま す 。 た と えば 、 文字 列 の 「3」 と 数 値 の 「3] は 、 デ ー タ 
型 は 異な り ま す が 値 は 等 し いと 見 な され る の で true に な り ま す 。 

「= デ =」 の 反対 が 「! 三 ] で す 。「!」 を 使っ た 条件 式 で は 、 左 辺 の 値 と 右辺 の 値 が 等 し く 
な けれ ば 、 条件 式 は true に な り 、 等 し けれ ば false に な り ま す 。 た と えば 、 文 字 列 の 「3」 
と 数 値 の 「3] は 値 が 等 し いと 見 な され 、false に な り ま す 。 

「===」 を 使っ た 条件 式 で は 、 左辺 と 右辺 の 値 と デー タ 型 が どちら も 等 し いと き 、 条 
件 式 は true に な り 、 ど ちら か が 等 し く な いと き は false に な り ま す 。 た と えば 、 文 字 列 
の 「3] と 数 値 の 「3] は 、 デ ー タ 型 が 異な る の で false に な り ま す 。 

デー] の 反対 が 「!ーー] で す 。「! ニ =」 を 使っ た 条件 式 で は 、 左辺 と 右辺 の 値 が 等 し く 
な いか 、 あ る い は デー タ 型 が 等 し く な けれ ば true に な り 、 値 と デー タ 型 が 両方 と も 等 
し けれ ば false に な り ま す 。 


@ 論理 演算 子 


論理 演算 子 は 、 よ り 複 雑 な 条件 式 を 書く と き に 使う 演算 子 で す 。 比 較 演 算 子 で 作っ た 
条件 式 と 組み 合わ せ て 使い ます 。 


な させ ミコ 名 前 条件 式 が true に な る 場合 使用 例 
&& 論理 積 演算 子 左右 の 式 が 両方 と も true の と き (>3) &&(n く 10) 
論理 和 演 算 子 左右 の 式 の どちら か が true の と き (mh く 3)『(n>10) 
! 論理 否定 演算 子 . 元 の 式 が false の と き I(n ニ = 3) 


人 @ 比較 演算 子 以外 を 使っ た 条件 式 


条件 文 や 繰り 返し 文 の 条件 に は 、 比 較 演 算 子 や 論理 演算 子 を 使っ た 条件 式 だ け で な く 、 
文字 列 や 数 値 を 使っ こと も で きま す 。 文字 列 や 数 値 な ど を 使っ た 場合 、true と false は 
以下 の よう に 判定 され ます 。 


true に な る 場合 false に な る 場合 
数 舎 0 以外 の 数 値 0 (数 値 )、NaN (0 を 0 で 割っ た 値 な ど ) 
文字 列 1 文字 以上 の 文字 列 」 空 文字 ("や "な ど 0 文字 の 文字 列 ) 
その 他 null、undefined 








Day Lesson 





繰り 返し 文 


この レッ スン で は 、 同 じ 処 理 を 繰り 返し た 
いと き に 使う 繰り 返し 文 の し くみ と 使い 方 


を 学び ます 。 
1 繰り 返し 文 1 while 文 
2 繰り 返し 文 2 for 文 
3 繰り 返し 文 ③ 一 - do while 文 
4 for 文 と 配列 を 使っ た 繰り 返し 処理 
5 イン クリ メン ト 演 算 子 と 

デ ク リ メン ト 演 算 子 


還っ 
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-es2 繰り 返し 文 ① 
s ぶ 4、 コ ォ ーーWhile 文 


SECTION 





1 つ 目 の 繰り 返し 文 は while 文 で す 。while は 英語 で 「 一 の あい 
1 だ 」 と いう 意味 で す が 、JavaScript で も 同じ く 、「 あ る 条件 が 
成り 立っ て いる あい だ 」 と いう 意味 合い で 使わ れ て いま す 。 


@ while 文 の 書き 方 


while 文 は 、 同 じ 処 理 を 繰り 返し 実行 し た いと き に 使う 構文 で す 。 プ ログ ラミ ング 用 
語 で は 、 繰 り 返し の こと を 「 ル ー プ ] と 言っ た り も し ます の で 、while ルー プ と 呼ば れる 
こと も あり ます 。 


朝 構文 : while 文 


whi1e (条件 ) { 
処理 


条件 が 成り 立つ て いる あい だ は 、 何 度 も 処理 が 繰り 返さ れ ま す 。 








@ while 文 を 使っ た サン プル プロ グラ ム 


実際 に while 文 を 使っ た サン プル プロ グラ ム を 作っ て み ま し ょ う 。 変数 {の 値 を 、0 か 
ら 2 ま で 、 1 ずつ 増やし な が ら 、 ブラウザ の 画面 に 出力 する プロ グラ ム で す 。 ソ ー ス コー 
ド を 入力 し て 、 実行 し て みて くだ さい 。 





Day 





Vari = 6: 

, while (1i < 3) { 
document.write1n( "<p> 変数 1 の 値 は '+ ュ + </p>'): 
ュ ++: 


| 3 





の らら OO 一 
本 
の 
の 
の 
〇 
コ 


プロ グラ ム を 実行 する と 、 以 下 の よ うな お 画面 が 表示 され ます 。 


SO x 文字 列 が 3 行 表示 され る 


@G fle:///C:/Users/ITO9%20Shizuka/[? 三 


プロ グラ ム 実 行 テ スト 

変数 の 値 は 0 度 得 aaa 

変数 の 値 は 1 

変数 の 値 は 2 document.writeln() は 、 ブ ラウ ザ 画 面 に 文字 を 
出力 する メソ ッ ド で す 。3-1-8 で 説明 し ます 。 





@ サ ンプ ルプ ログ ラム の 解説 


while 文 の 前 で 、 変 数 ij を 宣言 し て いま す 。 初期 値 は 0 (数 値 ) で す (1 行 目 ) 。 

2 行 目 か ら 5 行 目 が while 文 に お なり ます 。while 文 の 条件 は 「i < 3] で す 。 つま り 「i が 
3 より 小さ い ] あい だ は 、 条 件 は true に な り ま す (2 行 目 ) 。 

while 文 の 処理 ブロ ッ ク に は 2 つの 文 が 含ま れ て いま す 。 

1 つめ の 文 は 、 画 面 に その 時 点 の 変数 i の 値 を 表示 する 文 で す 。 

2 つめ の 文 は 、i の 値 を 1 つ 増 や す 文 で す (「 寺 +] の 意味 と 使い 方 は 2-2-5 で 説明 し ま 
す )。 

この プロ グラ ム が どの よう に 動く か を も う 少 し くわ し く 見 て み ま し ょ う 。 


潤 SIIM ハ 一 一 G 油 て 庫 〇 藩 | IN う 


この 変数 if の こと を 、 カ ウン タ (カウ ンタ 変数 ) と 呼 
び ま す 。 繰り 返し の 回 数 を カウ ント する 役割 を 果たし 
て いる か ら で す 。 
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[1 回目 の 確認 ] 変数 i の 初期 値 は 0 の 状態 で 、while 文 の 条件 の 確認 に 入り ます 。 


条件 の 確認 (1 回 目 ) 
と 処理 の 実行 





「 変 数 の 値 は 0] と 表示 





while 文 の 条件 は 「 変 数 1 が 3 より 小さ い 」 で す 。 こ の 時 点 で は 、 変数 i は 0 な の で 、 条 
件 は true、 よ つっ て 以下 の 処理 (3 行 目 と 4 行 目 ) が 実行 され ます 。「 変 数 i の 値 は 0」 と 画 
面 に 表示 され (3 行 目 ) 、i の 値 が 1 増え て 1 に な り (4 行 目 )、 再 び 条件 の 確認 (2 行 目 ) に 
戻り ます 。 


[2 回 目 の 確認 ] 変数 i の 値 が 1 の 状態 で 、while 文 の 条件 の 確認 に 入り ます 。 


条件 の 確認 (2 回 目 ) 
と 処理 の 実行 





「 変 数 {の 値 は 1」 と 表示 





この 時 点 の 変数 i の 値 は 1 で す の で 、 条 件 は true で す 。 よ っ て 処理 が 実行 され ます 。「 変 
数 の 値 は 1] と 画面 に 表示 され 、i の 値 が 1 増え て 2 に な っ て か ら 、 再び 条件 に 戻り ます 。 





[3 回 目 の 確認 ] 変数 ij の 値 が 2 の 状態 で 、while 文 の 条件 の 確認 に 入り ます 。 


条件 の 確認 ③ 回 目 ) 


と 処理 の 実行 













「 変 数 i の 値 は 2] と 表示 


この 時 点 の 変数 i の 値 は 2 で す の で 、 条 件 は true で す 。 よ っ て 処理 が 実行 され ます 。「 変 
数 1[ の 値 は 2]」 と 画面 に 表示 され 、i の 値 が 1 増え て 3 に な っ て か ら 、 再び 条件 に 戻り ます 。 


[4 回 目 ] 変数 1 の 値 が 3 の 状態 で 、while 文 の 条件 の 確認 に 入り ます 。 


条件 の 確認 (4 回目) 


false 


処理 を 実行 せ す 終了 


この 時 点 の 変数 ij の 値 は 3 で す 。 こ こ で 異変 が 起こ り ま す 。 季 件 「i が 3 より 小さ い 」 が 
成り 立た な い (false) の で す 。 条 件 が false に な っ た の で 次 の 処理 は 実行 され ず 、 ス キッ 
プ さ れ て 、while 文 は 終了 し ます 。 


COLUMN 


無限 ルー プ 

繰り 返し 文 で は 条件 の 設定 が も っ と も 重要 な の で す が 、 そ れ と 同じ ぐら い 大 事 な の が 、4 行 目 
の 「 け 十 :] で す 。 こ の 文 は 変数 {の 値 を 1 つ す つ 増 や す 役 割 を に な っ て いま す 。 こ の 文 が な いと 、 
変数 i は 0 の まま な の で 、while 文 は 永遠 に 実行 され 続け 、 画 面 に は 果て し な く 「 変 数 {の 値 は 0] 
と いう 文 が 表示 され る で し ょ う 。 こ の よう な 状態 を 無限 ルー プ と いい ます 。 

Chrome で 無限 ルー プ の プロ グラ ム を 実行 する と 、 ブ ラウ ザ が フリ ー ズ 状態 に な かり ます 。 フ リー 
ズ し た ら 、 ブ ラウ ザ を いっ た ん 終了 し て くだ さい 。 

繰り 返し 文 を 使う と き に は 、 目 的 の 回 数 実行 し た ら プ ログ ラム が 終了 する よう な 条件 に な っ て い 
る か 、 確 認 し まし よう 。 


Da 


ビ 
の 
の 
の 
GO 
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_-s2 繰り 返し 文 ② 
s ぶ 4 人 、 ョ ーーfor 文 


SECTION 


の 2 つ 目 の 繰り 返し 文 は for 文 で す 。for も 英語 で は 「ー の あい だ 」 






と いう 意味 で す 。while 文 と 同じ く 、「 あ る 条件 が 成り 立っ て い 
る あい だ 」 繰り 返す 文 で す 。 


人 for 文 の 書き 方 


for 文 も 、 同 じ 処 理 を 繰り 返し 実行 し た いと き に 使う 構文 で す 。 for ル ー プ と 呼ば れ 
る こと も あり ます 。while 文 と こ 違う つの は 、 条 件 の 部 分 で 「 カ ウン タ 初 期 値 の 設定 ] 「 条 件 」 
「 カ ウン タ 値 の 更新 ] の 3 つ を 同時 に 指定 で きる よう に な っ て いる と ころ で す 。 


萌 構文 : for 文 


for (初期 値 : 条件 : 更新 ) { 
処理 


} 


条件 が 成り 立っ て いる あい だ は 、 何 度 も 処理 
が 繰り 返さ れ ま す 。 条件 が true の あい だ は 
何 度 で も 処理 を 実行 する 





借 for 文 を 使っ た サン プル プロ グラ ム 
で は 、for 文 を 使っ た サン プル プロ グラ ム を 作っ て み ま し ょ う 。 変数 {の 値 を 、0 か ら 
2 まで 、1 ずつ 増 や し な が ら 、 ブ ラウ ザ の 画面 に 出力 する プロ グラ ム で す 。 ソ ー ス コー 
ド を 入力 し て 、 実行 し て みて くだ さい 。 


1 ! for (vani =9:i<3: ュ ++) { 
2 : document.write1n( "<p> 変数 の 値 は "+ 1 + '</p>'): 


Day 








プロ グラ ム を 実行 する と 、 以 下 の よ うな 画面 が 表示 され ます 。 


] プロ グラ ム 庄 行 テ スト  x 空 訓 が 3 行 表示 
』 @G fle:///C:/Users/ITO9%20Shizuka/[ マ > 三 文字 列 が 3 行 表示 され る 























Lesson 
プロ グラ ム 実 行 テ スト 2 
変数 の 値 は o MEMO 
乾 数 人 人 
変数 の 値 は 2 for 文 の i++]」 の あと に は セミ コロ ン (:) は 付 0 な 
け ま せん 。 付け る と エラ ー に な り ま す 。 |2 | 
例 へ = た. 返 
人 @ while 文 と for 文 の 違い 
この プロ グラ ム の 動作 自体 は 、 前 の セク ショ ン で 解説 し た サン プル プロ グラ ム と まっ 文 
た く 同 じ で す の で 、 前 の セク ショ ン を 見 て いた だ く と し て 、 代 わり に 、while 文 と for 《② 
文 の 違い と 、for 文 の 注意 点 を 説明 し て お きた いと 思い ます 。 
for 文 で は 、while 文 の 前 に あっ た 「var i= 0:] と 4 行 目 の 「 二 二 」 が 、for 文 の カッ コ 
の 中 に 移動 し てき て いま す 。 ひび 
葵 while 文 か ら for 文 へ べ 
ひぃ の @ 文 
の for 《ar i = ei < ( 
j 
for 文 で は 「 二 」 が 処理 ブロ ッ ク の 前 に 来 て いま す が 、 i の 値 が 1 増え る の は 処理 ブ 
ロッ ク が 実行 され た あと (while 文 と 同じ ) な の で 、 こ の 点 勘 違い し な いよ うに し まし ょ 
8 
while 文 と for 文 、 ど ちら を 使う か で す が 、 動 作 も 実行 結果 も 同じ で す の で 、 好 き な 
方 を 使っ て いた だ いて か まい ませ ん 。 繰り 返し の 回 数 を 明確 に 指定 し た い 場 合 は 、for 
文 を 使う と いい で し ょ う 。 た と えば 5 回 繰り 返し た いと き は [| = 0:1 く 5: け 士 」、30 
回 繰り 返し た いと き は 「i = 0:i く 30: け +」 な ご ど と 書き ます 。 
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Lewaoni き 繰り 返し 文 ③ 
ーーQo ~ while 文 


うつ 3 つ 目 の 繰り 返し 文 は do - while 文 で す 。 名 前 が while 文 と 似 


SECTION 


て いま す が 、 動 作 は 異な り ま す 。 間 違え な いよ うに 、 違 い を 意識 
し て 覚え まし よう 。 





@ do 一 while 文 の 書き 方 


do 一 while 文 も 、 同 じ 処 理 を 繰り 返し 実行 し た いと き に 使う 構文 で す 。do - while 
ルー プ と も 呼ば れ ま す 。while 文 で は ブロ ッ ク の 前 に あっ た 「while (処理 ) 」 が ブロ ッ ク 
の 後ろ に 来 て いま す 。 


萌 構文 : do て while 文 


do { 
処理 


} whi1e (条件 ) 





while 文 と 同じ く 、 条 件 が 成り 立っ て いる あい だ は 、 何 度 も 処理 が 繰り 返さ れ ま す 。 


| 旭 理 | 
false 
ンズ 系 作っ 条件 が true の あい だ は 
何 度 で も 処理 を 実行 する 


@ do 一 while 文 を 使っ た サン プル プロ グラ ム 


で は 、do 一 while 文 を 使っ た サン プル プロ グラ ム を 作っ て み ま し ょ う 。 変数 {の 値 を 、 
0 か ら 2 ま で 、1 ずつ 増やし な が ら 、 ブ ラウ ザ の 画面 に 出力 する プロ グラ ム で す 。 ソ ー 
スコ ー ド を 入力 し て 、 実行 し こみ て くだ さい 。 





UVSE 三 0 


1 

2 ! do { Lesson 
3 , document.write1n( "<p> 変数 ふ の 値 は "+ ュ + </px>'): 2 
4 「『: ュ ++> 

5 ! } while (1i < 3) 

プロ グラ ム を 実行 する と 、 以 下 の よ うな 画面 が 表示 され ます 。 13 | 
ー [es 文字 列 が 3 行 表示 され る 株 

G fle:///C:/Users/ITO%20Shizuka/[ マ > 三 り 
ゃ | 

プロ グラ ム 実 行 テ スト 返 
変数 の 人 (30 し 
変数 の 値 は 1 文 
変数 の 値 は 2 ③ 





@ while 文 と do ~ while 文 の 違い 


O 〇 - 
e 
この プロ グラ ム の 動作 自体 は 、while 文 や for 文 の セク ショ ン で 解説 し た サン プル プ ( 
ログ ラム と まっ た く 同 じ で す の で 、 前 の セク ショ ン を 見 て いた だ く と し て 、 ここ で は 、 ミ 
while 文 と do - while 文 の 違い を 説明 し て お きま す 。 つづ 


功 while 文 疹 do~-while 文 





do 一 while 文 は 、 条 件 の 判定 が ブロ ッ ク の 後ろ に 来 て いる た め 、 条 件 が 成り 立た な 
い 場 合 で も 、 最 低 1 回 は 処理 が 実行 され ます 。 こ れ に 対し て 、while 文 は 、 条 件 判定 が 
前 に ある た め 、 衝 件 が 成り 立た な い 場 合 は 、 処 理 は 1 回 も 実行 され ず に 終わ り ま す 。 
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Er 


-ews TOr 文 と 配列 を 使っ た 
人 4 繰り 返し 処理 


SECTION 


繰り 返し 文 は よく 配列 と 一 緒 に 使わ れ ま す 。 配列 と for 文 を 使っ 
4 た 典型 的 な 繰り 返し 処理 を 見 て お きま し ょ う 。 


人 @ 使用 する 配列 と デー タ 


for 文 に よる 繰り 返し 処理 を 使っ て 、 配 列 の 要素 に 入っ つて いる デー タ を 、1 つ す まつ 、 
順番 に 出力 する プロ グラ ム を 考え て みた いと 思い ます 。 

今回 使う 配列 は 、 サ ッ カ ー 選 手 4 人 の 名 前 が 、 背 番号 に 対応 する イン デック ス の 要素 
に 代入 され て いる 配列 で す 。 こ の 配列 の デー タ を 、 最 終 的 に は 次 の よう な 文章 と し て 出 
力 し た いと 考え て いま す 。 






宙 配列 : member 
1424 3 44 背 番号 1 は 川島 選手 
の の の ga 
ア w 背 番号 3 は 酒井 選手 
member[1] 1 rb 背 番号 4 は 本 田 選 手 
member[2] member[4] 
借 配列 を 宣言 し て デー タ を 代入 


プロ グラ ミン グ に 移り まし ょ う 。 ま すず 変 数 を 宣言 し て 、 サ ッ カ ー 選 手 4 人 の 名 前 を 配 
列 と し て 代入 し ます 。 有 要素 0 は 空 に し て お きま す 。 


1 var memben =['', ' 川 島 ', ' 内 田 ', ' 酒 井 ', ' 本 田 ']: 


借 for 文 を 使わ ず に 書い て みる 


ちょ っ と 回 り 道 に かなり ます が 、 今 回 の 処理 を for 文 を 使わ ず に 書い て みる と 、 こ の よ 


つ に な り ま す 。 


の 選 の OO 一 


見 て いた だ く と 分 か る よう に 、 背 番号 と イン デック ス が きれ い に 1 つ す つ 増 えて いま 
す 。 ご これ を for 文 の カウ ンタ 変数 ij で 置き 換え れ ば 、 き れい に 繰り 返し 処理 が で きる は 


すず で す 。 


var member = ["', ' 川 島 ', ' 内 田 ', ' 酒 井 ', ' 本 田 ']: 

document.write1n( '<p> 背 番号 1 は ' + member[1] + ' 選手 </p>' ): 
document.write1n( "<p> 背 番号 2 は ' + member[2] + ' 選手 </p>'): 
document.write1n( "<p> 背 番号 3 は ' + member[3] + ' 選手 </p>'): 
document.write1n( "<p> 背 番号 4 は ' + member[4] + ' 選手 </p>'): 


人 配列 の イン デック ス と for 文 の カウ ンタ を 
連動 させ る 


for 文 の カウ ンタ 変数 ij を 使っ て 、 配 列 の イン デック ス と 要素 を 表し て み ま す 。 要素 0 


は 出力 し な い の で 、 i の 初期 値 は 1 に し ます 。 


1 1 var member =['"。 ' 有 川島", ' 内 田 '。 ' 酒 井 '。 ' 本 田 ']: 
OF Va よ = すま で 5: HP) キ 


CO 


document.write1n( '<p> 背 番号 '"+ ミ + "は '+ member[i] + ' 選 


手 </p>') 


寺 NN ま 


これ で サン プル プロ グラ ム は 完成 で す 。 実行 する と 次 の よう な 画面 が 表示 され ます 。 


@ 口 277C ブ UEroTC36255hzukoT 々 痛 番号 と 選手 名 が 出力 され る 





プロ グラ ム 夷 行 テ スト 


プロ グラ ム 実 行 テ スト 


背 番 号 1 は 川島 選手 


背 番号 2 は 内 田 選 手 
背 番号 3 は 酒井 選手 
背 番号 4 は 本 田 選 手 





ky 


Day 


tie 
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っ 
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li イン クリ メン ト 演 算 子 
と デ ク リ メン ト 演 算 子 


SECTION 





繰り 返し 文 の カウ ンタ を 増やし た り 減 らし た りす る と き に よく 使 
】 う 演算 子 に つい て 説明 し ます 。 
人 @ イ ンク リ メ ン ト 注 算 子 


イン クリ メン ト 演 算 子 は 、 変 数 の 数 値 を 1 つ 増 や す 演算 子 で す 。 イ ンク リ メ ン ト 
(increment) は 英語 で 、「 増 加 ] と いう 意味 で す 。 

な サミ セコ 名 前 機能 

十 二 イン クリ メン ト 渡 算 子 変数 の 数 値 を 1 つ 増やす 


ソー スコ ー ド で の 使い 方 は この よう に な り ま す 。 


1 = 1 // 変 数 ふ に 1 が 代入 され る 
1++) // 変数 3 の 値 が 1 つ 増 えて 、2 に な る 


人 @ デ クリ メン ト 演 人 算 子 


デ ク リ メン ト 演 算 子 は 、 変 数 の 数 値 を 1 つ 減 ら す 演算 子 で す 。 デ クリ メン ト 
(decrement) は 英語 で 、「 減 少 」 と いう 意味 で す 。 
の ミコ 名 前 機能 
デ ク リ メン ト 演 算 子 変数 の 数 値 を 1 つ 減ら す 


ソー スコ ー ド で の 使い 方 は この よう に な り ま す 。 


1 = 1: // 変数 i に 1 が 代入 され る 
ュ 1--: // 変数 3 の 値 が 1 つ 減っ て 、9 に な る 
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Lesson 





関数 


この レッ スン で は 、 よ く 使 う 処 理 を ひと ま 
と め に する た め の 関 数 の し くみ と 使い 方 を 
学び ます 。 





関数 の し くみ 

戻り 値 を 出力 する 関数 
引数 を 受け 取る 関数 
変数 の スコ ー プ 

関数 の 定義 方 法 の 3 つの 
人 リエ ーション 


の モ の いい ー 


3psy ct 


SECTION 





関数 と は 、 よ く 使う 処理 を ひと まとめ に し て 、 ブ ログ ラム の 中 で 
1 何 度 も 使え る よう に し た バー ツ の こと で す 。 ま ず は 基本 的 な し く 
み と 使い 方 を 覚え まし よう 。 
人 @ 関数 と は ? 


関数 と は 、 プ ログ ラム の 中 で 何 度 も 使う 処理 を ひと まとめ に し た パー ツ で す 。 自分 で 
関数 を 作る こと を 、 プ ログ ラミ ング 用 語 で 関数 を 定義 は する と いい ます 。 関 数 を 定義 する 
に は 、function 文 を 使っ て 、 こ の よう に 書き ます 。 


再 構文 : 関数 の 定義 


function 関数 名 () { 
処理 


} 





関数 名 は プロ グラ マ が 自分 で 考え て 付け ます 。 付 け 方 の ルー ル は 、 変 数 名 と 同じ で す 。 
関数 名 の あと に 半角 丸 カ ッ コ を 付け る の を 忘れ な いよ うに し て くだ さい 。 


人 @ 関数 を 定義 し て みる 


た めし に 円 の 面積 を 計算 する 関数 を 定義 し て み ま し ょ う 。 ま すず 、 ぶ ふつ うに 円 の 面積 を 
計算 する 処理 は 、 以 下 の よ うに な り ま す 。 半径 は 7 と し て あり ます (わずらわし い の で 、 
m や mf な どの 単位 は すべ て 省略 し ます )。 


VaPo ま 702 7 ま 354 
window.al1ert(s): 


これ を 関数 に する に は 、 こ の 処理 に 関数 名 を 付け て 、 中 カッ コ で 囲 め ば 良い の で す 。 


, function circ1e() { 
WASE 三 SKI 3 14 に 
1 window.a1ert(s): 


1 3 


らら OO NO 一 


これ で 関数 circle() は で きま し た が 、 こ の まま サン プル プロ グラ ム を 実行 し て も 何 も 
起こ り ま せん 。 関 数 の 処理 を 実行 する に は 、 プ ログ ラム の 中 で 「 関 数 を 呼び 出す ] 必要 
が あり ます 。 


人 @ 関数 の 呼び 出し 方 


プロ グラ ム の 中 で 関数 を 使う こと を 、 プ ログ ラミ ング 用 語 で 関数 を 呼び 出す と いい ま 
す 。 関 数 を 呼び 出す に は 、 関 数 名 と 半角 丸 カ ッ コ を 書く だ け で OK で す 。 
環 構文 : 関数 の 呼び 出し 方 


関数 名 ( ) 


人 @ 定義 し た 関数 を 呼び 出す サン プル プロ グラ ム 


先ほど 作っ た サン プル プロ グラ ム に 、 定 義 し た 関数 を 呼び 出す 1 行 を 書き 加え て (5 
行 目 )、 実 行 し て み ま し ょ う 。 ダ イア ログ ボッ クス に 面積 の 数 値 が 表示 され れ ば 成功 で す 。 








1 1 function circ1e() { 

の VGCSSii 三 7 720B512453 
3 window.a1ert(s): 

4 ! } 

5 | circ1e( ): 


153.86 


し 9 」 
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ua 


Lesson 3 


.。 。 . 戻り 値 を 出力 する 関数 


SECTION 


の 関数 の 大 事 な 機能 で ある 戻り 値 の し くみ と 使い 方 を 学び ます 。 





人 @ 関数 を 改良 し て みる 


前 の セク ショ ン で 作っ た 関数 circle() で は 、 円 の 面積 を 計算 し て 、 ダ イア ログ ボッ ク 
ス に 出力 し まし た 。 今回 は これ を 少し 改良 し て 、 関 数 の 処理 を 「 円 の 面積 を 計算 する 」 
と いう こと に 特 化 させ て み ま し ょ う 。 つ まり 、 こ の よう な お 形 に な り ま す 。 


1 ! function circ1e() { 

5 VaniS =7 7 ドキ 35145 
1 

4 circ1e( ) 


し か し この まま で は 、 関 数 circle() を 呼び 出し て も 円 の 面積 は 表示 され ませ ん 。 関 数 
を 呼び 出す と き に 、 面 積 を 表示 する 処理 を 書き 加え る 必要 が あり ます 。 面積 を 警告 ダイ 
アロ グ ボ ックス に 表示 し た い の で 、4 行 目 を て の よう に 変え て こみ た ら ど う で し ょ うか 。 


1 function circ1e( ) { 
2 ! VS:= ニ クル フチ KJ45 
まま 絆 
4 1 window.a1ert(circ1e( ) ) : 
これ で 実行 し た と ころ 、 ダ イア ログ ボッ クス に は 「undefined」 と 表示 され る だ け で 、 
円 の 面積 は 表示 され ませ ん 。 


で は ど つ すれ ば いい か ? 関数 の 処理 結果 を プロ グラ ム の 他 の 場所 で 使う に は 、 関 数 
か ら 戻 り 値 (も どり ち ) が 出力 され る よう に 定義 する 必要 が あり ます 。 


1 2 レバ 


2 日 目 
に 


人 @ 戻り 値 と は ? 


戻り 値 と は 、「 関 数 か ら 出力 され る デー タ 」 の こと で す 。 戻り 値 を 指定 し て ある 関数 
を 呼び 出す と 、 内 部 の 処理 が 実行 され 、 そ の 処理 結果 が 戻り 値 (デー タ ) と し て 出力 さ 
れ ま す 。 

戻り 値 と いう と な ん だ か 特別 な 感じ が し ます が 、 実 体 は 普通 の デー タ な の で 、 他 の デー 
タ と 同じ よう に 使う こと が で きま す 。 
戻り 値 を 出力 する 関数 の し くみ 





今回 の サン プル プロ グラ ム で は 、 変 数 s の 値 を 戻り 値 と し て 出力 し た いと 考え て い 
ます 。 戻 り 値 を 指定 する に は return 文 を 使い ます 。 return 文 は 、 戻 り 値 を 出力 し て 、 
関数 の 処理 を 終 そ る 働き を し ます 。 書 き 方 で す が 、「return] の あと に 、 戻 り 値 と し て 
出力 し た い 変 数 名 や 式 を 記入 する だ け で す 。 こ れ で 変数 の 値 や 式 の 結果 が 戻り 値 と し て 
出力 され ます 。 

議 構文 : 戻り 値 を 出力 する 関数 の 定義 


function 関数 名 () { 
処理 


return 変数 名 や 式 : 
} 





今回 の プロ グラ ム で は 、 変 数 s の 値 を 戻り 値 と し て 出力 する の で 、3 行 目 に 「return s:」 
と いう 1 行 を 追加 し ます 。 


function circ1e() { 
Vamis = 7 や 7 3.14: 
Feturn Ss: 

を 


window.a1ert(circ1e( ) ) 


の お OO DO 一 


この プロ グラ ム を 実行 する と 、 警 告 ダ イア ログ ボッ クス に 円 の 面積 が 表示 され ます 。 
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JavaScript の アラ ー ト 


153.86 





円 の 面積 が 表示 され た 


ff 文 や for 文 と 違っ て 、 関 数 の 中 カッ コ {) の 中 は ブロ ッ 
ク で は な い の で 、 文 が 1 つ だ け の 場合 で も () を 省略 し て 
は いけ ませ ん 。 


戻り 値 は 、 返 り 値 ( か えり ち ) と 呼ば れる こと も あり ます 。 
1 つの 関数 に つき 、 戻 り 値 は 1 つ し か が 指定 で きま せん 。 


return の あと に は 、 変 数 を 使わ ず に 、 式 を 直接 書い て も か まい ませ ん 。 た と えば 、 


今回 の サン プル プロ グラ ム は 、 こ の よう に 書い て も 動作 は 同じ で す 。 


や の O DO 一 


function circ1e( ) { 


Peturn 7 * 7 * 3。14: 


0! 


! window. alert(circ1e( ) ) : 


し 


「 EE 


Lesson 3 


.。 。 . 引数 を 受け 取る 関数 


SECTION 


1 関数 の 大 事 な 機能 で ある 引数 (ひき すう ) の し くみ と 使い 方 を 学 
び ま す 。 





人 関数 内 の 変数 に デー タ を 代入 する 


今 の と ころ 、 関数 circle() は 半径 7 の 円 の 面積 を 計算 し て 出力 する 関数 で す 。 し か し 、 
で きれ ば 、 も っ と いろ いろ な 半径 値 の 円 の 面積 を 計算 で きる 、 汎 用 的 な 関数 に し た いと 
ころ で す 。 

た と えば 、 半 径 の 数 値 を 変数 に 置き 換え て 、「 関 数 の 中 の 変数 に 値 を 自由 に 代入 で き 
る よう な 関数 ] に で き な い で し ょ つか? 半径 7 を 変数 r に 置き 換え て み ま し よう つ 。 


1 ( function circ1e( ) { 

0 Vah Ss Ph キネ ます 3.145 
3 Peturn S} 
1 8 


この よう に し た 場合 、 変数 r の 値 を どこ か で 代入 で きる よう に し な く て は いけ ませ ん 。 
関数 内 部 の 変数 に 値 を 代 信 する に は 、 引 数 (ひき すう ) と いう し くみ を 使い ます 。 


@ 引数 と は ? 


引数 と は 、「 関 数 に 入力 する デー タ 」 の こと で す 。 呼び出さ れ た 関数 が 、 引 数 を 受け 
取れ る よう に する に は 、 こ の よう に 定義 し ます 。 


1 1 function circl1e(r) { 

2 VaS 9 PON35L45 
3 Peturn S: 
4 


ド 


に 5 


Day 


cie 
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関数 名 の 半角 丸 カ ッ コ の 中 に 、 引 数 を 代入 し た い 変 数 名 (今回 の サン プル で は r) を 記 
人 入 し ます 。 こ の 変数 を 仮 引 数 (かり ひき すう ) と いい ます 。 
凍 構文 : 引数 を 受け 取る 関数 の 定義 


function 関数 名 ( 仮 引数 ) { MEMO 


人 {666 ぞ † 人 有 有 
処理 仮 引数 は 、 変 数 で す が 、var で 


宣言 する 必要 は あり ませ ん 。 


return 変数 名 や 式 : 


} 





ヤ 3 2 ee し くみ 


仮 引数 は 「 パ ラメ ー タ (parameter)」 と も 呼ば れ ま す 。 
また 、 引 数 の こと を 「 実 引数 ( じ つ ひ きす う )」 と 呼ぶ 
こと も あり ます 。 


人 @ 関数 を 呼び 出し て 引数 を 渡す に は ? 


呼び 出す 関数 に 引数 を 渡す に は 、 関 数 の 半角 丸 カ ッ コ の 中 に 、 引 数 と し て 渡し た い デ ー 
タ を 記入 すれ ば OK で す 。 


凍 構文 : 3 数 を 渡し て 関数 を 呼び 出す 方 法 


関数 名 (引数 ) 


た と えば 、 半 径 12 の 円 の 面積 を 計算 し て 出力 し て ほし いと き は 、「circle(12)」 と 書 
きま す ( 行 目 ) 。 


function circl1e(r) { 
VS 三 中 ま P ネ 3.145 
Peturn S: 

9 ま 


window.alert(circle(12 ) ) : 


ID 2psy 
100 


の お OO DO 一 


この プロ グラ ム を 実行 する と 、 ア ラー ト ダ イア ログ ボッ クス に 円 の 面積 が 表示 され ます 。 


| JavaScript の アラ ー ト * | | 半径 12 の 円 の 面積 が 表示 され た 


452.16 





に あ 。! 





@ 仮 引 数 は 複数 指定 で きる 


仮 引 数 は いく つ で も 指定 で きま す 。 関数 を 定義 せる と き に 、 仮 引数 を 複数 指定 する 場 
合 は 、 そ れ ぞ れ の 仮 引数 を 半角 カン マ で 区 切り ます 。 


朝 構文 : 複数 の 引数 を 使う 関数 の 定義 


function 関数 名 ( 仮 引数 1 仮 引 数 2) { 
処理 


return 変数 名 や 式 : 
} 





呼び 出し た 関数 に 複数 の 引数 を 渡す に は 、 関 数 の 半角 丸 カ ッ コ の 中 に 、 引 数 と し て 渡 
し た い デ ー タ を 半角 カン マ で 区 切っ て 記入 し ます 。 


音 構 文 : 複数 の 引数 を 渡し て 関数 を 呼び 出す 方 法 


関数 名 (引数 1, 引数 2) 


た と えば 、 四 角形 の 面積 を 計算 する 関数 square を 作っ て み ま し ょ うつ 。 仮 引 数 に は 、 
変数 w (底辺 の 長 さ ) と 変数 h (高き) の 2 つ を 指定 し ます (1 行 目 ) 。 関 数 を 呼び 出す と き 
に 、 底 辺 の 長 さと 高 さ を 引数 と し て 渡せ ば (5 行 目 ) 、 四 角形 の 面積 が ダイ アロ グ ボ ッ ク 
ス に 表示 され ます 。 


1 function square(w, h) { 
2 Var s = w * hh: 

3 Peturn S: 

才 3 

5 


window.a1ert( square(7, 5)): 


Day 


GOAL 











ー 
の 
の 
の 
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っ 
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Lesson FPP 


。 。 。 変数 の スコ ー プ 


SECTION 


変数 の 有効 範囲 の こと を スコ ー プ と いい ます 。 関数 内 部 の 変数 に 
4 か か わる 事柄 で す の で 、 こ こ で 説明 し て お きま す 。 





@ グ ロー バル 変数 と ロー カル 変数 


変数 の スコ ー プ (有効 範囲 と は 、 そ の 変数 が 存在 し て いて 、 使 用 で きる 範囲 の こと 
で す 。 プ ログ ラム で 宣言 し た 変数 の スコ ー プ は 、 そ の プロ グラ ム 全 体 で す 。 プ ログ ラム 
の 中 に 関数 が ある 場合 は 、 関 数 の 内 部 で も その 変数 に 値 を 代入 し た り 、 参 照 し た りす る 
こと が で きま す 。 プ ログ ラム 全体 を スコ ー プ と する 変数 の こと を 、 グ ロー バル (大 域 ) 
変数 と いい ます 。 

一 方 、 関 数 の 内 部 で var で 定義 し た 変数 
の スコ ー プ は 、 そ の 関数 の 内 部 だ け に な 
り ま す 。 関 数 の 外 で は 、 そ の 変数 に 値 を 
代入 し た り 、 参 照 し た りす る こと は で き 
ませ ん 。 こ の よう お 関数 の 内 部 だ け を ス 
コー プ と する 変数 の こと を 、 ロ ー カ ル ( 局 





所 ) 変数 と いい ます 。 

関数 の 仮 引 数 は 、Var で 定義 し て いま せ | ロー カル 人 変数 は _- 

ん が 、 自動 的 に ロー カル 変数 と な り ま す 。 関数 外部 か ら は 使え な い 
COLUMN 


関数 の 内 部 で グロ ー バ ル 変 数 を 宣言 する に は ? 

関数 の 内 部 の 変数 を グロ ー バ ル 変 数 と し て 宣言 する こと も で きま す 。 グ ロー バル 変数 と し て 宣言 
する に は 、var を 付け ず に 宣言 すれ ば OK で す (要する に 、 宣 言 せ ず に 使う )。 こ うす れ ば 関数 の 
外 か ら 使う こと が で きま す 。 
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Day 


人 


es 関数 の 定義 方 法 の 
人 つつ の 人 バリエ ーション 


SECTION 


JavaScript に は 、 す で に 紹介 し た 方 法 の 他 に も 関数 を 定義 する 方 法 
が あり ます 。 最後 に それ ら を まとめ て 説明 し て お きま す 。 初級 の 段階 
で は 使わ な かい か も し れ ま せん が 、 と りあ えす 知っ て お きま し ょ う 。 


@ 宣言 し て 定義 する 


まず お さら いで す 。 こ の レッ スン で 最初 に 
紹介 し た の は 、function 文 と 関数 名 と 使う 方 
で し た 。 この 方 法 で 定義 され た 関数 を 宣言 | UTCtion 関数 名 () { 


中 
型 の 関数 と いい ます 。 ) 処理 





@ 変数 に 代入 し て 定義 きる 


2 つづ 目 は 変数 を 使う 方 法 で す 。 関 数 は 変数 に 代入 する 方 法 で も 定義 9 せる こと が で きま 
す 。 こ の 右辺 の 書き 方 を 関数 リテラ ル と いい ます 。 


靖 構文 : 変数 を 使っ た 関数 定義 


var 変数 名 = function() { 
処理 


} 





この 関数 は 、function の あと に 関数 名 を 書か な い の で 、 無 名 関数 と も 呼ば れ ま す 。 
配列 や ? め オブ ジェ クト な ど ご ど と 同じ で 、 代 入 し た 変数 名 が 関数 名 に な り ま す 。 関数 を 呼び 出 
す 方 法 や 、 引 | 数 を 渡す 方 法 は 、 宣 言 型 の 関数 と 同じ で す 。 た と えば 、2-3-3 の 関数 の 定 
義 は 、 こ の よう に も 書け ます 。 


1 ! var circle = function(r) { 
VS 三 NIC BS 


IO 


和 3pay GOAL 











ーー 
の 
@ 
O 
3 


SUoS 喧 皆 各 S 甘 吾 区 | ら う 


SS 
ン 


V 山 ツーH に こ 
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中 5 Peturn S: 


も 


2 つ 目 の 方 法 の 応用 で す が 、 変 数 に 代入 し て 定義 で きる と いう こと は 、 オ ブ ジ ェクト 
の プロ パテ ィ に 代入 し て も 定義 で きま す 。 変数 shape に オブ ジェ クト を 代入 し 、 circle 
プロ パテ ィ に 関数 を 代入 する に は 、 こ の よう に 書き ます 。 


“ var shape = { 
circle: function(r) { 
1 WaiSii ミ IM 21 
1 Peturn Ss: 
No 
1 


window.alert( shape .circ1e(6) ) 


ざ の の 8 の O の OO 一 


プロ パテ ィ に 代入 し た 関数 は 、 メ ソ ッ ド と 呼ば れ ます (1-6-1 で 軽く 触れ まし た )。 す 
で に サン プル プロ グラ ム の 中 に は 書い て あり ます が 、 メ ソ ッ ド を 呼び 出す に は 、 オ ブ ジ ェ 
クト と ピリ オド (.) を 使っ て 、 プ ロ パ ティ を 参照 する の と 同じ 書き 方 を 使い ます 。 


軍 メソ ッ ド の 呼び 出し 方 
オブ ジェ クト 名 . メソッド 名 () 





人 @ コン スト ラク タ を 使っ て 定義 する 


3 つ 目 は コン ス トラ クタ を 使う 方 法 で す 。2 つ 目 と 同じ よう に 変数 に 代入 し て 定義 し 
ます が 、 右 辺 の 書き 方 が ちょ っ と 違い ます 。Function の 先頭 文字 は 大 文字 で す 。 


王 構文 : コン スト ラク タ を 使っ た 関数 の 定義 方 法 


Var 変数 名 = new Function(' 仮 引数 ', ' 処理 '): 


この よう に 定義 され た 関数 も 無名 関数 で す 。 コ ンス トラ クタ と は 何 な の か 、 こ れ は いっ 
た い ご つう いう し くみ な の か 、 く わし く は 2-4 で 説明 し ます の で 、 と りあ えす 存在 だ け 覚 
えて お いて くだ さい 。 
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Day 


KO 





Lesson 





組み 込み オブ ジェ クト 


ご の レッ スン で は 、JavaScript に あら か 
じ め 用 意 さ れ て いる 組み 込み オブ ジェ クト 
に つい て 説明 し ます 。 ち ょ っ と プロ グラ ミ 
ング 的 に 高度 な 内 容 な の で 、 難 し いな と 思 
つた 方 は 、 飛 ば し 読み し て いた だ いて か ま 
いま せん 。 


組み 込み オブ ジェ クト の し くみ 
Date オ ブ ジ ェクト 

Math オ ブ ジ ェクト 

RegExp オ ブ ジ ェクト 
Array オ ブ ジ ェクト 
String オ ブ ジ ェクト 
Number オ ブ ジ ェクト 
Function オ ブ ジ ェクト 

その 他 の 組み 込み オブ ジェ クト 


の CO 6 つい の の 6 OO 一 


GOAL 
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だ 


4 組み 込み オブ ジェ クト 
ji:4、4』 の し くみ 


SECTION 


JavaScript に は 、 オ ブ ジ ェクト の テン プレ ー ト で ある 組み 込み 
1 オブ ジェ クト が あら か じ め 用 意 さ れ て いま す 。 





人 @ 組み 込み オブ ジェ クト と は ? 


JavaScript に は 、 あ ら か じ め よ く 使う オブ ジェ クト の テン プレ ー ト (ひな お 形 ) が 用 意 
され て いま す 。 こ ご これら オブ ジェ クト の テン プレ ー ト は 、 組 み 込み オブ ジェ クト と 呼ば れ 
ます 。 


組み 込み オブ ジェ クト は 、 他 に も 「 ビ ルト イン オブ ジェ クト 」「 ネ イ テ ィ ブ オ ブ ジ ェクト 」「 固 有 
の オブ ジェ クト 」「 基 本 の オブ ジェ クト 」 な ど と 呼ば れ た り も し ます 。 


人 組み 込み オブ ジェ クト の 種類 


組み 込み オブ ジェ クト に は 、 以 下 の よ うお 種類 が あり ます 。 こ の あと 1 つ ず つ 説 明 し 
ます の で 、 と りあ そえ ず どん な も の が ある の か だ け 、 ざ っ と 目 を 通し て お いて くだ さい 。 


オブ ジェ クト 名 に 二 は 


Date オブ ジェ クト 日 付 や 日 時 を 扱う オブ ジェ クト 

Math オブ ジェ クト 数 学 関連 の 機能 を まとめ て いる オブ ジェ クト 
RegExp オブ ジェ クト 正規 表現 を 使う た め の オ ブ ジ ェクト 

String オブ ジェ クト 文字 列 に 対応 する オブ ジェ クト 


Number オブ ジェ クト 数 値 に 対応 ける オブ ジェ クト 
Boolean オブ ジェ クト 論理 値 に 対応 する オブ ジェ クト 


Object オブ ジェ クト すべ て の オブ ジェ クト の 基本 と な る オブ ジェ クト 
Array オブ ジェ クト 配列 に 対応 する オブ ジェ クト 
Function オブ ジェ クト 関数 に 対応 ける オブ ジェ クト 
0 エラ ー に 関す る オブ ジェ クト 


| ED レル 


人 組み 込み オブ ジェ クト を 使っ て 新しい オブ ジェ クト 
を 作る に は ? 


組み 込み オブ ジェ クト を 使っ て 、 新 し い オ ブ ジ ェクト を 作り た いと き は 、new 演算 
子 を 使っ て 、 変 数 を 宣言 し ます 。 


再 構文 : オブ ジェ クト の 作り 方 


var 変数 名 = new 組み 込み オブ ジェ クト の 種類 () : 
arieAeagiriui aa 


コン スト ラク タ 





「new 組み 込み オブ ジェ クト の 種類 ()」 の 部 分 を 、 プ 
ログ ラミ ング 用 語 で 、 コン スト ラク タ と いい ます 。 


た と えば 、 新 し い Date オ ブ ジ ェクト を 生成 し て 、 変 数 today に 代入 する に は 、 こ の 
よう に 書き ます 。 


var today = new Date( ): 


これ で 、 変数 today の 中 に は 、Date オ ブ ジ ェクト の テン プレ ー ト に よっ て 作ら れ た 、 
新しい オブ ジェ クト (イン スタ ンス ) が 代入 され て いま す (Date オ ブ ジ ェクト に つい て 
は 、 次 の セク ショ ン で 説明 し ます )。 


組み 込み オブ ジェ クト を も と に 作ら れ た 新しい オブ ジェ クト の こと を 、 プ ログ ラミ ング 用 語 で 、 
イン スタ ンス と いい ます 。 


人 組み 込み オブ ジェ クト の 何 が 便利 な の か ? 
扱い た い デ ー タ の 種類 に 応じ た 適切 な 組み 込み オブ ジェ クト を 使え ば 、 自分 で ゼロ か 


ら オ ブ ジ ェクト を 作る の に 比べ て 、 プ ロ パ ティ や メソ ッ ド を 準備 する 手 問 が 大 幅 に 軽減 
され ます 。 


ト 3psy GOAL 








NMNSi$ 区 | お 


7/ 


人 入 て 9 ブ VH 


107 


ーー ニー 
Lesson 4 


。 . Date オブ ジェ クト 


SECTION 








Date オブ ジェ クト は 、 日 付 や 時 刻 に 関す る プロ パテ ィ (お も に 
の メソ ッ ド ) が あら か じ め 備 わっ て いる 組み 込み オブ ジェ クト で す 。 


介 Date オブ ジェ クト の イン スタ ンス を 作成 する 


Date オ ブ ジ ェクト の コン スト ラク タ を 使っ て 、 新た な オブ ジェ クト (イン スタ ンス ) 
を 作る に は 、 こ の よう に 書き ます 。 


世 構文 : Date オブ ジェ クト の イン スタ ンス の 作成 


var 変数 名 = new Date( ) 


人 @ Date オブ ジェ クト を 使っ た サン プル 


実際 に Date オ ブ ジ ェクト の イン スタ ンス を 作っ て み ま し ょ う 。 以下 の ソー スコ ー ド 
を 入力 し て 、 実行 し て みて くだ さい 。 


var today = new Date( ) 
window.alert(today ) 


実行 する と 、 実 行 し た 日 時 が 書か れ た アラ ー ト ダイ アロ グ ボ ックス が 表示 され ます 。 


JavaScript の アラ ー ト 実行 時 の 日 時 が 表示 され た 


Thu Jun 05 2014 14:25:12 GMT+0900 (東京 ( 標 閥 時 )) 








覆 。 
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人 @ サン プル プロ グラ ム の 解説 





today と いつ 変数 に は Date オブジェ クト の イン スタ ンス が 作ら れ て いて 、 作 成 さ れ Lesson 
た 日 時 に 関す る デー タ が すでに 代入 され て いま す 。 今回 は 「2014 年 6 月 5 日 14 時 25 分 4 
12 秒 」 に 、 こ の 命令 を 実行 し た の で 、 代 入 さ れ て いる デー タ が 加工 され て 「Thu Jun 
05 2014 14:25:12 GMT 0900 (東京 (標準 時 ))] と 表示 され た と いつ わけ で す 。 


介 Date オブ ジェ クト の お も な メソ ッ ド 


Date オ ブ ジ ェクト に は 、 次 の よう な メソ ッ ド が あり ます 。 
寝 Date オブ ジェ クト の お も な メソ ッ ド 


メソ ッ ド 名 に 


getTime() 
getFullYear() 
getMonth() 
getDate() 
getDay() 
getHours() 
getMinutes() 
getSecondS() 
getMilliseconds() 
toDateString() 
toString() 
toTimeString() 
toLocaleDateString() 
toLocaleString() 
toLocaleTimeString() 
setDate() 
setFulIYear() 
setHours() 
setMilliseconds() 
setMinutes() 
setMonth() 
SetSeconds() 


、 3psy 
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日 時 を 1970 年 1 月 1 日 0 時 以降 の ミリ 秒 と し て 返す 
年 の 値 (4 桁 ) ロー カル 時 間 で 返す 

月 の 値 (0 一 11) を ロー カル 時 間 で 返す 

日 付 の 値 (1 一 31) を ロー カル 時 間 で 返す 

曜日 の 値 (0 一 6) を ロー カル 時 間 で 返す 

時 の 値 (0 一 23) を ロー カル 時 間 で 返す 

分 の 値 (0 一 59) を ロー カル 時 間 で 返す 

秒 の 値 (0 一 59) を ロー カル 時 間 で 返す 

ミリ 秒 の 値 (0 一 999) を ロー カル 時 間 で 返す 

ロー カル 時 間 の 日 付 を 文字 列 と し て 返す 

ロー カル 時 間 の 日 時 を 文字 列 で 返す 

ロー カル 時 間 の 時 刻 を 文字 列 で 返す 

ロー カル 時 間 の 日 付 を ロー カル 表現 し た 文字 列 で 返す 
ロー カル 時 間 の 日 時 を ロー カル 表現 し た 文字 列 で 返す 
ロー カル 時 間 の 時 を ロー カル 表現 し た 文字 列 で 返す 
日 付 の 値 (1 一 31) を ロー カル 時 間 で 設定 する 

年 の 値 (4 桁 ) を ロー カル 時 間 で 設定 する 

時 の 値 (0 一 23) を ロー カル 時 間 で 設定 する 

ミリ 秒 の 値 (0 一 999) を ロー カル 時 間 で 設定 する 

分 の 値 (0 一 59) を ロー カル 時 間 で 設定 する 

月 の 値 (0 一 11) を ロー カル 時 間 で 設定 する 

秒 の 値 (0 一 59) を ロー カル 時 間 で 設定 する 
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ロー カル 時 間 と は 、 世 界 各地 の 標準 時 の こと で す 。 標準 時 は 協定 世界 時 (UTC また は GMT) を 
基準 に 決め られ て いま す 。 た と えば 日 本 標準 時 (JST) は 協定 世界 時 より 9 時 間 進 ん で いる の で 
「UTC (GMT) +0900」 と 表記 され ます 。 


Date オ ブ ジ ェクト の イン スタ ンス に 入っ て いる 日 時 に 関す る デー タ を 参照 し た り 、 
デー タ を 上 書き し た りす る に は 、 用 意 さ れ て いる メソ ッ ド を 使い ます 。 

た と えば 、 こ れ ら の メソ ッ ド を 使っ て 、 今 日 は 「 〇 月 〇 日 で す 」 と いう 文字 列 を 表示 
し た いと き に は 、 こ の よう な ソー スコ ー ド を 書き ます 。 
宙 現在 の 月 日 を 表示 する サン プル プロ グラ ム 
var today = new Date( ) 
, Var m = today .getMonth() + 1: 


var d = today.getDate( ) 
window.alert( ' 今日 は "+ m+ "月"+ d+ "日 で す ") 


や の DO 一 


月 と 日 付 の デー タ は 、 そ れ ぞ れい っ た ん 変数 m と 変数 d に 代入 し て か ら (2、 3 行 目 ) 、 
警告 ダイ アロ グ ボ ックス に 表示 し て いま す (4 行 目 ) 。 

月 の デー タ は 1 月 が 「0] な の で 、 あら か じ め 1 を 定 し て (2 行 目 ) 、 私 た ち が ぶ ふだん 使っ 
て いる 月 数 が 正しく 表示 され る よう に し て あり ます 。 


人 @ 特定 の 日 時 デー タ を 持つ イン スタ ンス を 作る に は ? 


Date オ ブ ジ ェクト は 、 現 在 の 日 時 を 自動 的 に 取得 し た イン スタ ンス だ け で な く 、 あ 
る 特定 の 日 時 デー タ を 持つ イン スタ ンス を 作る こと も で きま す 。 


萌 構文 : 特定 の 日 時 デー タ を 持つ イン スタ ンス の 作成 


var 変数 名 = new Date( 年 , 月 , 日 , 時 , 分 , 秒 , ミリ 秒 ): 


た と えば 、「2014 年 7 月 25 日 午後 2 時 30 分 ] ていう デー タ が 代入 され た イン スタ ン 
ス を 作成 する に は 、 こ の よう に 書き ます 。 


1 , var birthday = new Date(2914。6。 25。14。 36): 
2 , window.alert(birthday ) 


ID レバ 
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Lesson 4 


。 。 . Math オブ ジェ クト  .。 


SECTION 
Math オブ ジェ クト は 、 数 学 関連 の 機能 を まとめ て いる 組み 込み 
1 オブ ジェ クト で す 。 プ ログ ラム ぐ で 数 学 的 な 操作 を する と き に 使い 
ます 。 











人 @ Math オブ ジェ クト は イン スタ ンス を 作ら な い 


Math オ ブ ジ ェクト の 使い 方 は 、 他 の 組み 込み オブ ジェ クト と は 違い ます 。 コ ンス ト 
ラク タ を 使っ て イン スタ ンス を 作る 必要 は あり ませ ん 。 イ ンス タン ス を 作ら ず に 、 す ぐ 
に 備わっ つて いる プロ パテ ィ や メソ ッ ド を 使え ます 。 
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@ Math オブ ジェ クト の プロ パテ ィ と メソ ッ ド 


Math オ ブ ジ ェクト に は 、 次 の よう な プロ パテ ィ と メソ ッ ド が あり ます 。 


軍 Math オブ ジェ クト の プロ パテ ィ 


プロ パテ ィ 名 肌 
E 数 学 定数 e (ネイ ピア 数 、 オ イラ ー 数 ) 。 自 然 対数 の 底 
LN2 2 の 自然 対数 
LN10 10 の 自然 対数 
LOG2E 2 を 底 と し た e の 対数 
LOG10E 10 を 底 と し た e の 対数 
Pl 円 周 率 、 パ イ ( 7 ) 
SQRT1_2 1/2 の 平方 根 


SQRT2 2 の 平方 根 





Math オブ ジェ クト の メソ ッ ド 


メソ ッ ド 名 に 





round(X) x の 小数 第 1 位 を 四捨五入 し た 値 を 返す 
cell(X) x の 小数 点 以 下 を 切り 上 げ る 

floor(X) x の 小数 点 以 下 を 切り 捨て る 

abs(X) x の 絶対 値 を 返す 

DOW(X, \) x を y で 累乗 し た 値 を 返す 

Sdrt(X) x の 平方 根 を 返す 

log(X) x の 自然 対数 を 返す 

eXD(X) 数 学 定数 e を x で 累乗 し た 数 を 返す 
max(X, y) 引数 の 中 で 最大 の 値 を 返す 

min(X, V) 引数 の 中 で 最小 の 値 を 返す 

random() 0 一 1 の 範囲 の 擬似 乱数 を 返す 

Sin(X) Xx の サイ ン を 返す 

COS(X) x の コサイン を 返す 

tan(X) X の タン ジェ ント を 返す 

asin(X) X の アー クサ イン を 返す 

acoS(X) Xx の アー クコ サイ ン を 返す 

atan(X) X の アー クタ ンジ ェ ン ト を 返す 
atan2(y. %) x 軸 か ら 、 指 定 され た y 座標 と x 座標 で 表 さ れ た 点 ま で の 


アー クタ ンジ ェ ン ト を 返す 


Math オ ブ ジ ェクト の メソ ッ ド を 使用 し た サン プル コー ド は 以下 の と お り で す 。 


//3.7 を 小数 第 1 位 で 四捨五入 

document .write1n(Math.round(3.7)): // 戻り 値 は 4 
//3.7 の 小数 点 以下 を 切り 捨て 

document.write1n(Math. foor(3.7)): // 戻り 値 は 3 
//2 の 4 乗 

document .write1n(Math.pow(2, 4)): // 戻り 値 は 16 
// 最大 値 

document.write1n(Math.max(-6, 19) ) : // 戻り 値 は 19 
// 最小 値 

document.write1n(Math.min(-6, 19)): // 戻り 値 は -6 
// 乱数 


document .write1n(Math . random( ) )  // 戻り 値 例 9 .95458993993159225 
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Lesson 4 、 
に 9 
全 @ RegExD オ ノ ジェ エク ト Lesson 
SECTION 4 
RegExp オブ ジェ クト は 、 正 規 表現 を 使う た め の 組 み 込み オブ 
4 ジェ クト で す 。 こ こ で は 、 正 規 表現 を 使っ た 検索 の 基本 を 学び ま OR 
す 。 MM 
る 
人 正規 表現 と は ? Q 
正規 表現 は 、 文 字 列 の 検索 や 置換 を 何 倍 も 楽に する 方 法 で す 。 な ぜ 楽 に な か る の か と い 結 
つと 、 あ る 「 特 殊 な 書き 方 」 を 使う こと で 、 通 常 な ら 何 回 に も 分 け て 検索 し な けれ ば な オ 
ら な いと ころ を 、 一 度 で ズバ ッ と 検索 で きる か ら で す 。 こ の [| 特殊 な 書き 方 」 の こと を ブ 
正規 表現 と いい ます 。 く 。 
ン 
MEMO エ 
の ク 
オブ ジェ クト 名 の RegExp と は 、Regular Expression (正規 表現 ) の 略 で す 。 ト 


た と え そば 、 あ る 文章 の 中 か ら 「 第 1 章 、 第 2 章 、…、 第 9 章 ] と いつ 文字 列 を 検索 し た 
いと し ます 。 普 通 の 検索 で は 、 ま すず 「 第 1 章 」 を 検索 し 、 次 に 「 第 2 章 」 を 検索 し 、 そ れ 
か ら 順 番 に 「 第 9 章 ] ま で 、9 回 検索 し な けれ ば な り ま せん 。 

し か し 、 正 規 表現 の 書き 方 を 使っ て 「 第 [1-9] 章 ] と いう 文字 列 で 検索 すれ ば 、1 回 の 
検索 で 「 第 1 章 ] か ら 「 第 9 章 ] まで を 一 度 に 検索 で きる の で す 。 


普通 の 検索 
第 1 章 一 一 第 1 章 
第 2 章 一 第 2 章 
第 3 章 一 一 第 3 章 
第 4 章 一 一 第 4 章 
第 5 章 一 第 5 章 
第 6 章 一 第 6 章 
第 7 章 一 第 7 章 
第 8 章 一 一 一 第 8 章 
第 9 章 一 第 9 章 


正規 表現 















第 [1-9] 章 


この 「 第 [1-9] 章 ] と いう 文字 列 の 中 の [1-9] は 、「1 か ら 9 ま で の 数 字 」 と いう 意味 を 
表し て いる 正規 表現 で す 。 こ の よう な お 特殊 な 書き 方 を 正規 表現 の パタ ー ン と いい ます 。 
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正規 表現 に は 、 検 索 や 置換 に 便利 な パタ ー ン が いく つも 用 意 さ れ て いま す 。 


人 @ 正規 表現 の バタ ー ン 一 覧 


JavaScript で 使え る お も な 正規 表現 の パタ ー ン を 以下 に 挙げ て お きま す 。 
究 お も な 正規 表現 パタ ー ン 


Em | 


人 行 の 先 避 

$ 行 の 未 尾 

XX 直前 の 文字 x の 0 回 以上 の 繰り 返し 

x 十 直前 の 文字 x の 1 回 以上 の 繰り 返し 

X? 直前 の 文字 x の 0 回 か 1 回 の 出現 

xtn) 直前 の 文字 x の n 回 の 繰り 返し 

xtn,.m) 直前 の 文字 x の nー m 回 の 繰り 返し 

. 何 か 1 文字 

XiyiZ x また は y また は z 

[xyz] xyz の うち の いずれ か の 1 文字 

[^xyz] xyz 以外 の 1 文字 

[a-z] から z の あい だ の 1 文字 (文字 コー ド 順 ) 

\b 単語 の 区 切り 

\B 語 の 区 切り 以外 の 文字 

\d 数 字 。[0-9] と 同じ 

\D 数 字 以 外 の 文字 。[^0-9] と 同じ 

\n 改行 文字 

\S 1 つの ホワ イト スペ ー ス (スペ ー ス 、 タ ブ 、 改行 文字 ) 

\S ホワ イト スペ ー ス 以外 の 1 文字 

\t タダ 

\W 英 数 字 。[A-Za-z0-9_] と 同じ 

\W 英 数 字 以 外 の 文字 。[^A-Za-z0-9_] と 同じ 
MEMO 


正規 表現 に つい て も っ と 知り た い 方 は 、 別途 、 正 規 表現 の 参考 書 や Web サ イト な ど で 学 ん で く 
だ さい 。 
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介 RegExp オ ブ ジ ェクト の イン スタ ンス を 作成 する 





RegExp オ ブ ジ ェクト の イン スタ ンス に は 、 検 索 文字 列 の 正規 表現 パタ ー ン を 代入 で 








Lesson 
きま す 。 4 
RegExp オ ブ ジ ェクト の イン スタ ンス を 作る 方 法 は 、2 種 類 あ り ま す 。 ま すず は コン ス 
トラ クタ を 使う 方 法 で す 。 ーー 
萌 構文 : コン スト ラク タ で イン スタ ンス を 作成 MM 
Var 変数 名 = new RegExp(' 正規 表現 ',。 ' フ ラグ '): さ 
0Q 
「m 
か コ 昌 きじ T こ 指定 し な 場合 XX 
g マッ チ す る 箇所 すべ て を 検索 ・ 置 換 す る 1 ヵ所 マッ チ し た ら 終 了 す る で 
大 文字 と 小文字 を 区 別 し な い 大 文字 と 小文字 を 区 別 する オ 
m 行頭 、 行 未 を 無視 する 行頭 、 行 未 を 認識 する ブ 
フラ グ と し て g を 指定 する と 、 検 索 対象 と な か っ て いる 文字 列 の 中 に 複数 マッ チ す る 箇 ク 
所 が あれ ば 、 すべ て に マッ チ し ます 。 指定 し な い 場 合 は 、 最初 の 1 ヵ所 に マッ チ し た ら 、 ト 
そこ で 検索 は 終了 し ます 。 


! を 指定 する と 、 正 規 表 現に アル ファ ベッ ト が 含ま れ て いる 場合 は 、 大 文字 に も 小 文 
字 に も マッ チ し ます 。 た と えば 「[a-z]] と いつ 正規 表現 で あれ ば 、 小 文字 の a 一 z と 大 
文字 の AA 一 に マッ チ し ます 。 

m を 指定 する と 、 複 数 行 に また が っ た 箇所 に も マッ チ し ます 。 


フラ グ は 複数 を 同時 に 指定 する こと も で きま す 。 そ の 場合 は 、「gi] や 「gim] な ど と 書き ます 。 
どの 順番 に 書い て も か まい ませ ん 。 
イン スタ ンス を 作る も う 1 つ の 方 法 は 、 ス ラッ シュ (/) を 使っ て 書く 方 法 で す 。 


珍 構文 : 正規 表現 リテラ ル を 使っ た イン スタ ンス 作成 


var 変数 名 = / 正 規 表 現 / フ ラグ : 


この よ つ お 書き 方 を 正規 表現 リテラ ル と いい ます 。 普 通 は こち ら の 方 法 を 使う こと が 
多い よう で す の で 、 こ の 書き 方 を 覚え て くだ さい 。 フ ラグ の 指定 の し か た は 、 コ ンス ト 
ラク タ を 使う 場合 と 同じ で す 。 
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@ RegExp オブ ジェ クト の メソ ッ ド 


RegExp オ ブ ジ ェクト に は 、 次 の 2 つの メソ ッ ド が あり ます 。 
宙 メソ ッ ド 
test() 引数 の 文字 列 パ ター ン と 一 致す る も の が あれ ば true、 な けれ ば false を 返す 
eX6C() 引数 の 文字 列 パ ター ン と 一 致す る も の が あれ ば 、 配 列 と し て 返す 


@ test() メソ ッ ド を 使っ た サン プル プロ グラ ム 


test() メ ソ ッ ド を 使っ て 、 正 規 表 現 パ ター ン で 検索 し て み ま し ょ う 。 以下 の ソー スコ ー 
ド を 入力 し て 、 実行 し て みて くだ さい 。 


] var r = / 第 [1-9] 章 /: 

, Var book = ' この 本 は 第 1 章 か ら 第 9 章 ま で あり ます 。『': 
! 1 (r.test(book) ){ 

] window.alert(' マッチ し まし た 『)} 

5 ま 


| 0 0 NO - テ 


実行 する と 、「 マ ッ チ し まし た 」 と 書か れ た 警告 ダイ アロ グ ボ ックス が 表示 され ます 。 


「 マ ッ チ し まし た 」 と 表示 され る 


JavaScript の アラ ー ト 





マッ チ し まし た 





1 行 目 で 、 変 数 r に 正規 表現 パタ ー ン を 代入 し て いま す 。 こ の r は RegExp オ ブ ジ ェ 
クト の イン スタ ンス で す 。 

2 行 目 は 、 検 索 さ れる 対象 と な る 文字 列 を 、 変 数 book に 代入 し て いま す 。 

3<5 行 目 は if 文 で す 。 条 件 は 「r.test(book)] と いう 式 で 、 変 数 r (RegExp オ ブ 
ジェ クト ) の test メ ソ ッ ド を 呼び 出し て 、 引数 に 変数 book を 指定 し て いま す 。 つ まり 、 
book の 文字 列 の 中 に 「 第 [1-9] 章 ] と いつ 正規 表現 パタ ー ン と 一 致す る も の が あれ ば 
true、 な けれ ば false を 返す 、 と いつ わけ で す 。 

今回 は true で す の で 、 警 告 ダ イア ログ ボッ クス を 表示 し て 終了 し ます (4 行 目 ) 。 
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ーー 。 . Array オブ ジェ クト 


に 1 ユ c3 | 


Array オブ ジェ クト は 、 配 列 を 扱う の に いろ いろ 便利 な メソ ッ 
1 ド や プロ パテ ィ が 用 意 さ れ て いる 組み 込み オブ ジェ クト で す 。 





人 Array オブ ジェ クト の イン スタ ンス は 配列 


Array オ ブ ジ ェクト の イン スタ ンス と いう の は 、 す で に 学ん だ 配列 と 同じ も の で す 。 
コン スト ラク タ を 使っ て 、 要 素 を 持た な い 空 の イン スタ ンス (配列 ) を 作る に は 、 こ の 
よう つ に 書き ます 。 


朝 構文 : 空 の イン スタ ンス を 作る 方 法 


var 変数 名 = new Array(): 


要素 に 代入 する デー ク 場 定 し じ て イ ンス タッ ズ を 作る 場合 は 、 引数 に カン マ で 区 切っ 
て デー タ を 記入 し ます 。 こ うつ すれ ば 、 デ ー タ が 先頭 要素 か ら 順 番 に 代入 され た 状態 で 配 
列 が 作成 され ます 。 


萌 構文 : 要素 に 代入 する デー タ を 指定 する 方 法 





var 変数 名 = new Array( デー タ 1, デー タ 2, デー タ 3): 


と りあ え ず 要素 の 数 を 指定 し て イン スタ ンス を 作る 場合 は 、 引 数 に 要素 の 数 を 指定 し 
ます 。 


萌 構文 : 要素 に 代入 する デー タ を 指定 する 方 法 


var 変数 名 = new Array( 要素 の 数 ) : 
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コンストラクタ を 使わ ず に 作る に は ? 


し か し 、 配 列 を 作る の で あれ ば 、 す で に 学ん だ 大 カッ コ と カン マ (.) を 使う 方 法 で 十 
分 で す 。 こ の 書き 方 を 配列 リテラ ル と いい ます 。 





JavaScript は 、 配 列 リ テラ ル で 作っ た 配列 で も 、Array オ ブ ジ ェクト の メソ ッ ド や 
プロ パテ ィ が 使え る よう な 親切 な し くみ に な っ て いま す 。 


@ Array オブ ジェ クト の プロ パテ ィ と メソ ッ ド 


Array オ ブ ジ ェクト の イン スタ ンス (と 配列 リテラ ル を 代入 し た 変数 ) で 使え る 、 お 
も な プロ パテ ィ と メソ ッ ド で す 。 す で に 1-5 で 説明 し た も の も あり ます が 、 ま と め て 挙 


げ て お きま す 。 


謙 お も な プロ パテ ィ 


プロ バテ ィ 名 機能 


length 


配列 の 要素 の 数 を 返す 


軍 お も な メソ ッ ド 


シア ルン と 


SOrt() 
「eVerSe() 
Shift() 
DOD() 
Splice() 
Slice() 
unshift() 
push() 
concat() 
{toString() 


join() 


要素 の 順番 を 並べ 替え る 

要素 の 並び 順 を 逆 に する ( 元 の 配列 が 変更 され る ) 
先頭 の 要素 を 削除 し 、 削 除 し た 要素 を 返す 

未 尾 の 要素 を 削除 し 、 削 除 し た 要素 を 返す 

要素 を 削除 し て 、 削 除 し た 要素 を 返す 

要素 を 、 範 囲 を 指定 し て 取り 出す ( 元 の 配列 は 変更 され な い ) 
先頭 に 新しい 要素 を 挿入 し 、 追加 後 の 配 列 の 長 さ を 返す 
未 尾 に 要素 を 追加 し 、 追 加 後 の 配列 の 長 さ を 返 す 

未 尾 に 、 複 数 の 要素 や 別 の 配列 を 結合 し た 新しい 配列 を 返す 
全 要 素 を 、 カ ンマ で 区 切っ て 結合 し た 文字 列 を 返す 

全 要 素 を 、 カ ンマ な ど で 区 切っ て 結合 し た 文字 列 を 返す 


通常 、 配 列 を 作る と き に は 、 書 き 方 が 簡潔 で 内 容 が 明解 な 配列 リテラ ル を 使っ て くだ 
さい 。 


レバ 
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Lesson 4 
@ い 1 に いい 1 
@ @ @ StrIng ゴ ノ ジェ ク ト Lesson 
SECTION 4 
String オブ ジェ クト は 、 文 字 列 を 扱う の に いろ いろ 便利 な メソ 
0 ッ ド や プロ パテ ィ が 用 意 さ れ て いる 組み 込み オブ ジェ クト で す 。 WM 
の 
借 String オブ ジェ クト の イン スタ ンス は 文字 列 本 
String オ ブ ジ ェクト は 文字 列 を 扱う た め の 組み 込み オブ ジェ クト で す 。 String オ ブ 0Q 
ジェ クト の イン スタ ンス は 、 new 演 算 子 を 使っ た コン スト ラク タ で 作り ます 。 ろ 


2 


萌 構文 : String オブ ジェ クト の イン スタ ンス の 作成 


var 変数 名 = new String(' 文字 列 '): 


ナ い \H ぺ 


し か し 、 こ の よう な 面倒 な 書き 方 を し な く て も 、 す で に 学ん だ 文字 列 リ テラ ル を 代入 
する 方 法 を 覚え て いれ ば 問題 あり ませ ん 。 なぜなら 、JavaScript は 、 単 純 デ ー タ 型 の 
文字 列 デー タ で も 、String オ ブ ジ ェクト の メソ ッ ド や プロ パテ ィ が 使え る よう な 親切 
な し くみ に な っ て いる か ら で す 。 

朝 構文 : 文字 列 リテラ ル の 代入 方 法 


Var 変数 名 = 文字 列 ': 


介 String オブ ジェ クト の プロ パテ ィ と メソ ッ ド 


String オ ブ ジ ェクト に は 、 文 字 列 を 操作 する た め の メ ソ ッ ド と プロ パテ ィ が 用 意 さ 
れ て いま す 。String オ ブ ジ ェクト の イン スタ ンス (と 文字 列 リ テラ ル を 代入 し た 変数 ) 
で 使え る 、 お も な プロ パテ ィ と メソ ッ ド で す 。 


寝 お も な プロ パテ ィ 
プロ パテ ィ 名 に 二 は 
length 文字 列 の 文字 数 を 返す 
7 3psy Fo 
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亡 お も な メソ ッ ド 
メソ ッ ド 名 
charAt() 
charCodeAt() 
concat() 
indexOf() 
lastlIndexOf() 
match() 
reDlace() 
search() 
Slice() 
Substring() 
toLowerCase() 
toUpperCase() 


指定 され た 位置 に ある 文字 を 返す 

指定 され た 位置 に ある 文字 の 文字 コー ド を 返す 

複数 の 文字 列 を 連結 し た 文字 列 を 返す ( 元 の 文字 列 は 変更 され な い ) 
指定 し た 文字 列 を 先頭 か ら 検 索 し 、 先 頭 文字 の 位置 を 返す 

指定 し た 文字 列 を 未 尾 か ら 検 索 し 、 先 頭 文 字 の 位置 を 返す 

正規 表現 で 文字 列 を 検索 し 、 マ ッ チ し た 部 分 文字 列 を 返す 

正規 表現 で 文字 列 を 検索 し 、 マ ッ チ 部 分 を 置換 し た 文字 列 を 返す 
正規 表現 で 文字 列 を 検索 し 、 マ ッ チ し た 部 分 の 先頭 文字 位置 を 返す 
指定 され た 範囲 の 文字 列 を 返す ( 元 の 文字 列 は 変更 され な い ) 
指定 され た 範囲 の 文字 列 を 返す ( 元 の 文字 列 は 変更 され な い ) 
すべ て の アル ファ ベッ ト を 小文字 に 変換 し た 文字 列 を 返す 

すべ て の アル ファ ベッ ト を 大 文字 に 変換 し た 文字 列 を 返す 


休 replace() メソ ッ ド を 使っ た サン プル 


先ほど ご 、RegExp オ ブ ジ ェクト の test() メソ ッ ド を 使っ た 検索 方 法 を 紹介 し まし た が 、 
String オ ブ ジ ェクト の match() メソ ッ ド や 、search() メソ ッ ド を 使っ て も 検索 で きま 
す 。 ま た 、『replace() メ ソ ッ ド を 使え ば 置換 が で きま す 。 こ こ で は 、 replace() メ ソ ッ 


ド を 使っ た 例 を 挙げ て お きま す 。 
1 ] Var r = /windows/1g: 
2 : var notice = "windows の 最新 版 は MTNDOMS 8 で す 。 ": 
3 , notice = notice.replace(r。 "Mindows' ) : 
4 , window.alert(notice): 


この プロ グラ ム は 、 変数 notice に 入っ て いる 「windows の 最新 版 は WINDOWS 8 
で す 。」 と いう 文字 列 の 「windows」 と 「WINDOWS」 と いう 表記 を 、「Windows」 に 置 
換 す る も の で す 。1 行 目 の 正規 表現 で は 、 フ ラグ に i と g を 指定 し て いま す 。 

replace() メ ソ ッ ド は 、 第 1 引数 に 検索 文字 列 、 第 23| 数 に 置換 文字 列 を 指定 し ます (3 
行 目 )。 今 回 は 、 検 索 文字 列 が 変数 r、 置 換 文 字 列 が 「Windows] な の で 、 そ れ ぞ れ 3| 数 
に 指定 し て いま す 。 置 換 後 の notice を 警告 ダイ アロ グ ボ ックス に 表示 し て 終了 し ます (4 


行 目 ) 。 


レバ 








as 、 


Lesson 4 


の 
の 
O 
コ 


Number オブ ジェ クト 


7 Number オブ ジェ クト は 、 数 値 を 使う た め の 組 み 込み オブ ジェ 


SECTION 


クト で す 。 数 値 を 操作 する た め の プ ロ パ ティ や メソ ッ ド が 用 意 さ 
れ て いま す 。 





借 Number オ ブ ジ ェクト の イン スタ ンス は 数 値 


Number オ ブ ジ ェクト の 朝 構 文 : Number オブ ジェ クト の イン スタ ンス の 作成 


イン スタ ンス も 、 new 演 人 算 
子 を 使っ た コン スト ラク タ で | Var 変数 名 = new Number( 数 値 ): 
作り ます 。 

し か し 、String オ ブ ジ ェクト 同様 、 数 値 を 扱う と き は 、 す で に 学ん だ 数 値 リ テラ ル 
を 代入 する 方 法 で 十分 で す 。 単純 デー タ 型 の 数 値 デ ー タ で も 、Number オ ブ ジ ェクト 
の メソ ッ ド や プロ パテ ィ が 使え る よう な し くみ に な っ て いま す 。 


NMNH JedunN 革 | > 
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@ Number オ ブ ジ ェクト の プロ パテ ィ と メソ ッ ド 


Number オ ブ ジ ェクト の イン スタ ンス (と 数 値 リ テラ ル を 代入 し た 変数 ) で 使え る 、 
お も な プロ パテ ィ と メソ ッ ド で す 。 


蘭 Number オブ ジェ クト の お も な プロ パテ ィ と メソ ッ ド 


プロ パテ イィ ・ メ ソ ッ ド 名 に 


MAX_VALUE JavaScript で 利用 で きる 最大 値 を 返す 
MIN_VALUE JavaScript で 利用 で きる 最小 値 を 返す 
NaN 「 数 値 で は な い 」 こと を 表す 値 (Not a Number の 略 ) を 返す 
NEGATIVE_INFINITY 負 の 無限 大 を 返す 
POSITIVE_INFINITY 正 の 無限 大 を 返す 
toExponential() 数 値 を 指数 形式 の 文字 列 (e を 使用 ) に 変換 し て 返す 
toFixed() 小数 点 以 下 の 桁 数 を 指定 し て 、 文 字 列 に 変換 し て 返す 
toString() 数 値 を 文字 列 に 変換 し て 返す 
e 還 、 に K ぴ GOAL 
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mm Function 
"オブ ジェ クト 


SECTION 
Function オブ ジェ クト は 、 関 数 や メソ ッ ド を 作る た め の 組 み 込 
み オ ブ ジ ェクト で す 。 









人 @ コン スト ラク タ を 使っ て イン スタ ンス を 作る に は ? 


コン スト ラク タタ を 使 つ て 関数 を 定義 する 方 法 は 、 す で に 2-3-5 で 紹介 し まし た 。 


萌 構文 : コン スト ラク タ を 使っ た 関数 の 定義 方 法 


Var 変数 名 = new Function(" 仮 引数 " , "処理" ) : 





この よう に コン スト ラク タ と 変数 を 使っ て 定義 され た 関数 を 無名 関数 と いい ます 。 


但 Function オブ ジェ クト を 使っ た サン プル 
この 方 法 を 使っ て 、2-3 で 出 て きた oircle() 関数 を 定義 9 る と この よう に な り ま す 。 


軍 特定 の 日 時 を 表示 する サン プル プロ グラ ム 


1 , Var circle = new Function('r'。 'return rh キ F * 3.14"): 


2 window.alert(circ1e(7) ) : 


String オ ブ ジ ェクト や Number オ ブ ジ ェクト 、Array オ ブ ジ ェクト と 同じ で 、 自分 
で プロ グラ ム を 書く 際 は 、 基 本 は 関数 リテラ ル を 使っ て 定義 すけ すれ ば 良い で す 。 

この 本 で は 、 文法 を ひと と お り 知 っ て お いた 方 が 良い と いう 観点 か ら 、 コ ンス トラ ク 
タ を 使っ た 定義 方 法 も 説明 し まし た 。 

コン スト ラク タ を 使っ た 関数 の 定義 を 見 て 、 と りあ え ず それ が 関数 を 定義 し た 文 で あ 
る こと と 、 ど の よう な 関数 を 定義 し て ある の か が わか れ ば 十分 で す 。 
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Lesson 4 その 他 の 
ja 人 Ss 組み 込み オブ ジェ クト 


SECTION 


その 他 の お も な 組み 込み オブ ジェ クト に つい て 、 簡 単に 説明 し て 
お きま す 。 





@ Object オブ ジェ クト 


Object オ ブ ジ ェクト は 、 他 の 組み 込み オブ ジェ クト と は ちょ っ と 位置 づけ が 異な り 
ます 。 こ の オブ ジェ クト は 、 他 の 組み 込み オブ ジェ クト や 、 プ ログ ラマ が ゼロ か ら 作 っ 
た オブ ジェ クト に 対し て 、 共 通し て 利用 で きる プロ パテ ィ や メソ ッ ド を 定義 し て いる オ 
ブ ジ ェクト で す 。 言う っ なれ ば 、 オ ブ ジ ェクト の ひな お 形 と な る 組み 込み オブ ジェ クト で す 。 

初級 者 が プロ グラ ミン グ を する 際 に 、Object オ ブ ジ ェクト の イン スタ ンス を 作っ て 
利用 する と いう こと は ほとん ご ど あり ませ ん 。 変数 に オブ ジェ クト を 代入 し た いと き は 、 
1-6 で 紹介 し た 方 法 を 使っ て くだ さい 。 


@ Boolean オブ ジェ クト 


Boolean オ ブ ジ ェクト は 、 独 自 の プロ パテ ィ や メソ ッ ド を 持つ て いな い 組 み 込 み オ 
ブ ジ ェクト で す 。 コ ンス トラ クタ を 使っ て 、 論理 値 を デー タ と し て 持つ イン スタ ンス を 
作る こと は で きま す が 、 通常 は 、1-4-4 で 紹介 し た true か false を 変数 に 代入 する 方 法 
を 使っ て くだ さい 。 


@ Error オブ ジェ クト 


Error オ ブ ジ ェクト は 、 お も に エラ ー メ ッ セ ー ジ を 表示 する た め の 組 み 込み オブ ジェ 
クト で す 。 プ ログ ラム に は エラ ー が つき も の で す 。 エ ラー が 出る と 、 普 通 は プロ グラ ム 
が 停止 し ます が 、 プ ログ ラミ ング の 際 に 、 エ ラー が 起き た 際 の 処理 を 、 あ ら か じ め 書 い 
て お く こ と が で きま す 。 こ れ を 例外 処理 と いい ます 。 
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例外 処理 が 書い て ある プロ グラ ム で は 、 プ ログ ラム で エラ ー が 発生 する と 、 自動 的 に 
Error オ ブ ジ ェクト が 作ら れ 、 エ ラー の 内 容 が 代入 され て 、 エ ラー 処理 を 担当 する 部 分 
に 引き 渡さ れ ま す 。 

エラ ー 処 理 を 担当 する 部 分 は 、Error オ ブ ジ ェクト の 内 容 を 使っ て 、、 ブ ラウ ザ に エラ ー 
内 容 を 表示 し ます 。 

この 本 で は 、 例 外 処理 に つい て は 説明 し て いま せん の で 、 と りあ え ず 、 例 外 処理 と い 
つも の が ある と いう こと だ け 、 覚え て お いて くだ さい 。 






Day 人 


Window オブ ジェ クト を 
使っ て ブラ ウザ を 操作 する 


この レッ スン で は 、JavaScript で ブ 
ラウ ザ を 操作 する た め に 用 意 さ れ て いる 
window オブ ジェ クト に つい て 学び ます 。 


window オ ブ ジ ェクト 
alert() メソッド な ど 
open() メ ソ ッ ド 
innerWidth プロ パテ ィ な ど 
location オブジェ クト 
history オ ブ ジ ェクト 
navigator オ ブ ジ ェクト 
document オ ブ ジ ェクト 


oO へ の の 6 の oO 一 
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Lesson 1 6 ee 
5 2 ブ ジ ェクト 
。 。 。 WInhdoOw オブ ジェ 
SECTION 
JavaScript で ブラ ウザ を 操作 する に は 、window オブ ジェ ク 
1 ト を 使い ます 。 


人 で window オブ ジェ クト と は ? 


JavaScript を 使う と 、 ブ ラウ ザ そ の も の を あれ これ 操作 する こと が で きま す 。 ブ ラ 
ウザ を 操作 する に は 、window オ ブ ジ ェクト と いう オブ ジェ クト を 使い ます 。 

この window オ ブ ジ ェクト は 、 ブ ラウ ザ が あら か じ め 用 意 し て くれ て いる オブ ジェ 
クト (ブラ ウザ オブ ジェ クト ) な の で 、 プ ログ ラマ が 作る 必要 は あり ませ ん 。 


@ window オブ ジェ クト の メソ ッ ド 


window オ ブ ジ ェクト に は 、 ブ ラウ ザ に 関す る デー タ が 入っ つた プロ パテ ィ や 、 ブ ラウ 
ザ を 操作 する メソ ッ ド が いろ いろ と 入っ て いま す 。 た と えば 、window オ ブ ジ ェクト の 
メソ ッ ド に は 、 以 下 の よ うな も の が あり ます 。 


麗 window オブ ジェ クト の お も な メソ ッ ド 


PP コ 機能 

alert0 警告 ダイ アロ グ ボ ックス を 表示 する 

confrm0) 確認 ダイ アロ グ ボ ックス を 表示 する 

prompt0 入力 ダイ アロ グ ボ ックス を 表示 する 

open() 新しい ブラ ウザ ウィ ンド ウ を 開く 

close() 開い た ブラ ウザ ウィ ンド ウ を 閉じ る 

print0 印刷 用 の 画面 を 表示 する 

scrolBy() ウィ ンド の 画面 の 中 身 を 、 指 定 し た 分 量 だ け ス クロ ー ル する 
scrolTo() ウィ ンド の 画面 の 中 身 を 、 指 定 し た 位置 まで スク ロー ル す る 





@ window オブ ジェ クト の プロ パテ ィ 


window オブ ジェ クト の プロ パテ ィ に は 、 以 下 の よ うな も の が あり ます 。 


珍 window オブ ジェ クト の お も な プロ パテ ィ 
outerHeight ブラ ウザ ウィ ンド ウ の 高 さ を 表す 数 値 (単位 は ピク セル ) 
outerWidth ブラ ウザ ウィ ンド ウ の 幅 を 表す 数 値 (単位 は ピク セル ) 
innerHeight ブラ ウザ ウィ ンド ウ 画 面 の 高 さ を 表す 数 値 (単位 は ピク セル ) 
innerWidth ブラ ウザ ウィ ンド ウ 画 面 の 幅 を 表す 数 値 (単位 は ピク セル ) 


location locatlon オブ ジェ クト が 入っ て いる 
history history オブ ジェ クト が 入っ て いる 
navigator navigator オブ ジェ クト が 入っ て いる 
document document オブ ジェ クト が 入っ て いる 


outerHeight プ ロ パ ティ 、outerWidth プ ロ パ ティ 、innerHeight プ ロ パ ティ 、 
innerWidth プロ パテ ィ に は 、 ブ ラウ ザウ ィ ン ド ウ に 関す る 数 値 が 入っ て いま す 。 

ま た 、locatton プ ロ パ ティ 、history プ ロ パ ティ 、navigator プ ロ パ ティ 、 
document プロ パテ ィ に は 、 そ れ ぞ れ オ ブ ジ ェクト が 入っ て いま す 。 


替 window オブ ジェ クト の 構造 


オプ ジェ クト alert() メ ソ ッ ド 


confirm() メ ソ ッ ド 
prompt() メ ソ ッ ド 
open() メ ソ ッ ド 
close() メ ソ ッ ド 
print() メ ソ ッ ド 
ScrolIBy() メ ソ ッ ド 
ScrollTo() メ ソ ッ ド 
innerWidth プ ロ パ ティ ほか 


location プ ロ パ ティ location オ ブ ジ ェクト 
history プ ロ パ ティ history オ ブ ジ ェクト 
navigator プ ロ パ ティ navigator オ ブ ジ ェクト 


その 他 の プロ バテ ィ 、 メソ ッ ド 


document プ ロ パ ティ document オ ブ ジ ェクト 
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alert() メソ ッ ド な ど 


SECTION 


ダイ アロ グ ボ ックス (ポッ プア ッ プ ウィ ンド ウ ) を 表示 する 
。 alert() メソ ッ ド 、confirm() メソ ッ ド 、prompt() メソ ッ ド に 
つい て 説明 し ます 。 


人 @ ぐ alert() メソ ッ ド の 書き 方 


alert) メ ソ ッ ド は 、 こ れ ま で 何 度 も 使っ て きた の で お な じみ だ と 思い ます 。 警告 ダ 
イア ログ ボッ クス を 表示 する メソ ッ ド で す が 、 じ つ は window オ ブ ジ ェクト の メソ ッ 
ド だ っ た の で す 。 


window.alert(' これ は 警告 ダイ アロ グ ボ ックス で す "): 


オブ ジェ クト の メソ ッ ド や プロ パテ ィ を 使う と き に は 、「 オ ブ ジ ェクト 名 . メ ソ ッ ド 名 
(プロ パテ ィ 名 )」 と 書く の で し た (1-6-2、2-3-5 参 照 ) 

し か し 、window オ ブ ジ ェクト は JavaScript で は 特別 な オブ ジェ クト と 見 な され て 
いて 、 人 省略 し て 書く こと が 許さ れ て いま す 。 で す の で 「alert0):」 と 書い て も 問題 な く 動 
作 し ます 。 

これ は 他 の window オ ブ ジ ェクト の プロ パテ ィ や メソ ッ ド に も あて は まり ます 。 ご 
の 本 で は 、window オ ブ ジ ェクト で ある こと を 意識 する た め 、「window.」 を 付け て 書 
いて いま す が 、 通常 は 省略 し て 書い て か まい ませ ん 。 


人 @ confirm() メソ ッ ド と prompt() メソ ッ ド 


confirm() メ ソ ッ ド は 確認 ダイ アロ グ ボ ックス を 、prompt(O) メソ ッ ド は 入力 ダイ ア 
ログ ボッ クス を 開く た め の メ ソ ッ ド で す 。 基本 的 な 使い 方 は 、alert() メ ソ ッ ド と 同じ 
Les 記 


window.confirm(" これ は 確認 ダイ アロ グ ボ ックス で す '): 
window.prompt(' これ は 入力 ダイ アロ グ ボ ックス で す "): 
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Lesson 1 上 
ソ ッ ド 
@ 生 ODeh() メ \ ツ Lesson 
SECTION 
新しく ウィ ンド ウ を 開い て 、 表 示 内 容 や サイ ズ を コン トロ ー ル す 
1 る に は open() メソ ッ ド を 使い ます 。 旨 
つ 
@ 新 し い ウ ィ ン ド ウ を 開く に は ? @ 
新しい ウィ ンド ウ を 開く に は 、window オブ ジェ クト の open() メソ ッ ド を 使い ます 。 ジ 
メ 
専 構文 : open() メソ ッ ド ① ソ 
window.open( ) ド 


た と えば 、 こ の よう な ソー スコ ー ド を 実行 する と 、 新 し い ウ ィ ン ド ウ が 開き ます 。 


window.open( ) 


Chrome で open() メ ソ ッ ド を 使っ て 新しい ウィ ンド ウ (ポッ プア ッ プ ) を 開 こ うと する と 、 危 


険 な サイ ト の 悪用 を 防ぐ べた め 、 あ ら か じ め ブ ロッ ク さ れる よう な 設定 に な つて いま す 。 
も し 、 作 つっ た サン プル プロ グラ ム が ブロ ッ ク さ れ た と き は 、 以 下 の 手順 を 行っ て くだ さい 。 





導 ゆ アイ コン を クリ ッ ク 
ご の ペー ジ の 次 の ポッ プア ッ プ が ブロ ッ ク さ れ ま し た : @ 「- の ポッ プア ッ プ を 常に 許可 する 」 を 
」 about:blank チェ ッ ク 
⑥ 「 完 了 」 を クリッ ク 
ポッ プア ッ プ を 引き 挟 き ブロ ッ ク す る 


の 〇 HTML フ ァイル を リロ ー ド 


ポッ プア ッ プ の ブロ ッ ク を 管理 .。 9| 





@ URL を 指定 し て 新しい ウィ ンド ウ を 開く に は ? 


URL を 指定 し て 新しい ウィ ンド ウ を 開き た いと き に は 、open() メ ソ ッ ド の 引数 に 
URL を 指定 し ます 。 


芝 構文 : open(O メソ ッ ド ② 
window.open('URL'。 "ウィ ンド ウ 名 ") 


た と えば 、 こ の よう な ソー スコ ー ド を 実行 する と 、 ソ シム の Web ペ ー ジ (http:// 
WWW.SOCym.CO.jp/) が 表示 され た 新しい ウィ ンド ウ が 開き ます 。 


window.open( 'http : //www . socym.co.]p/', 'socym' ) 


引数 と し て 指定 する URL に は 、http:// (また は https://) も 忘れ ず に 付け る よう に し て くだ さい 。 
「 ウ ィ ン ド ウ 名 」 に は 、 好 き な 名 前 を 付け て か まい ませ ん 。 


@ け イズ を 指定 し て 新しい ウィ ンド ウ を 開く に は ? 


開く ウィ ンド ウ の サイ ズ を 調整 し た いと き に は 、open() メ ソ ッ ド の 3 番目 の 引数 に 、 
ウィ ンド ウ の サイ ズ を 指定 し ます 。 


埋 構 文 : open() メソ ッ ド ③ 


window.open( "URL', "ウィンドウ 名 ','width= 幅 ,height= 高 さ ') 





た と えば 、 幅 600 ピク セル 、 高 さ 450 ピク セル の 新しい ウィ ンド ウ を 開き た いと き は 、 
この よう に 書き ます 。 


window.open( "http : //www . socym.co.]p/', 'socym' 
,  'width=699,height=459' ) : 


9 番目 の 引数 に は 、 いっ さい 空白 (半角 スペ ー ス や タブ 、 改行 ) を 含め て は いけ ませ ん 。 
エラ ー に な り ま す 。 


130 








nf ITherWidth 
プロ パテ ィ な ど 和 † 


ブラ ウザ ウィ ンド ウ の 大 き さ を 操作 する に は 、 innerWidth プロ 
4 パテ ィ な ど を 使い ます 。 








SECTION 





@ ひ ウィ ンド ウ の 数 値 が 入っ て いる プロ パテ ィ 


outerHeijight プ ロ パ ティ 、outerWidth プ ロ パ ティ 、 innerHeight プ ロ パ ティ 、 


innerWidth プロ パテ ィ に は 、 そ れ ぞ れ ブ ラウ ザウ ィ ン ド ウ に 関す る 数 値 が 入っ て いま 
す 。 


報 プロ バ パティ と ブラ ウザ ウィ ンド ウ 数 値 の 対応 


innerHeight プロ パテ ィ outerHeight プ ロ パ ティ 


叶 へ 帆 ニ ロ NL HPIAdSuul 区 | ユ 


innerWidth プロ パテ ィ | | ーーーーーーー- 

タブ ブラ ウザ の 場合 は 、 フ ァイル を 開い 
て いる タブ の 大 き さ に 関す る 数 値 が 入っ 
outerWidth プロ パテ ィ て いま す 。 





@$ プ ロバ ティ で ブラ ウザ ウィ ンド ウ に 関す る 値 を 取得 
する に は ? 


各 プ ロ パ ティ で 、 開 いた ウィ ンド ウ に 関す る 数 値 を 取得 し て 、 警 告 ダ イア ログ ダイ ア 
ログ ボッ クス に 表示 し て み ま し ょ う 。 以下 の ソー スコ ー ド を 入力 し て 、 実行 し て みて く 
だ さい 。 
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1 ( var oh = window.outerHeight: 

2 var Oow = window.outerMidth : 

3 var ih = window.1nnerHeight: 

4 Var iw = window.1nnerMidth: 

5 “ alert(oh+ リ 。) ToW キ リリ キュ ロ ナ リリ リオ 1iW): 
| JavaScript の アラ ー ト 本 


ウイ オツ ドウ ウブ % 


大 き さ が 表示 され た 


727,1027,645,1017 
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人 =. 2 


Lesson 1 


ーー 。 location オブ ジェ クト …。 


SECTION 


ここ か ら は window オブ ジェ クト の 中 に ある オブ ジェ クト に つい 
で て 順番 に 説明 し て いき ます 。 location オブ ジェ クト は 、Web ペ 
ー ジ の 、URL に 関す る デー タ が 格納 され て いる オブ ジェ クト で す 。 





@ Iocation オブ ジェ クト と は ? 


locatlon オ ブ ジ ェクト は 、window オ ブ ジ ェクト の location プロ パテ ィ の 中 に 入っ 
て いる オブ ジェ クト で す 。 location オ ブ ジ ェクト の プロ パテ ィ を 操作 する と 、URL に 
関す る 情報 を 取得 し た り 、 変 更 し た りす る こと が で きま す 。 

locattion オ ブ ジ ェクト の プロ パテ ィ に は 、 以 下 の よ うな も の が あり ます 。 


NIAH uo1BoOo| 区 
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替 |ocation オブ ジェ クト の 構造 



















location オ ブ ジ ェクト 
locatlion プ ロバ ティ 
その 他 の プロ バテ ィ 、 メソ ッ ド 


hash プ ロ パ ティ 










珍 |ocation オブ ジェ クト の お も な プロ パテ ィ 


プロ パテ ィ 名 な に 

Nfef URL 全体 RI &target ニ normal 
protocol プロ トコ ル http: 

hostname ドメイン 名 SOcym.COJjp 

pathname ファ イル まで の パス  / 

search クエ リ 文 字 列 ?2cat=1&target=normal&s=htm#pageTt 

hash ハッ シュ 値 #pageTtl 


これ ら の プロ パテ ィ の うち 、 よ ぐ く 使 われ る プロ パテ ィ は href プロ パテ ィ で す 。 


3psy ー 5 〇 GOAL 
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@ href プロ バテ ィ で URL の 値 を 取得 する に は ? 


href プロパ ティ に は 、 表 示さ れ て いる Web ペ ー ジ の URL が 入っ て いま す 。 た と えば 、 
href プロ パテ ィ に 入っ て いる 値 (URL) を 、 警 告 ダ イア ログ ボッ クス に 表示 する に は 、 
この よう に 書き ます 。 


window.alert(window.1ocation . href) : 


Sample.html は パソ コン の 中 に 保存 し て いる ファ イル な の で 、 こ の ソー スコ ー ド を 
実行 する と 、URL で は な く 、 フ ァイル の 置き 場所 まで の パス が 表示 され ます が 、 こ の ファ 
イル を Web サ ー バ に 置い て 実行 すれ ば 、 フ ァイル の URL が 表示 され ます 。 


@ href プロ バテ ィ の 値 を 書き 換え る と どう な る か ? 


href プロ パテ ィ の 中 の 値 (URL) を 書き 換え る と 、 書 き 換え た ペー ジム へ 移動 し ます 。 
た と えば 、URL を "http://Www.socym.co.jp/' に 書き 換え て み ま し ょ う 。 


window.1ocation .href= ' http : //www.socym.co.]P/「: 


この ソー スコ ー ド が 書か れ た sample.html を 実行 する と 、 ペ ー ジ が ブラ ウザ で 開か 
れ た 瞬間 、http://Www.socym.co.jp/ の ペー ジ に 移動 し ます 。 


= 2 


se 


昌 暫 8 





href プロ パテ イィ は 「 現 在 開か れ て いる ペー ジ の URL」 を 示す 値 な の で 、 こ れ を 別 の 
URL に 書き 換え る と 、 強 制 的 に その ペー ジ を 開く よう に 動作 し ます 。 
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Lesson 1 


Day 





ーー。 。 history オブ ジェ クト 





SECTION 


の 


@ history オブ ジェ クト と は ? 


history オ ブ ジ ェクト は 、window オ ブ ジ ェクト の history プロ パテ ィ の 中 に 入っ て 
いる オブ ジェ クト で す 。history オ ブ ジ ェクト の プロ パテ ィ や メソ ッ ド を 使っ うと 、 閲 
覧 履歴 件 数 を 取得 し た り 、 ペ ー ジ を 戻し た り 、 先 に 進め た りす る こと が で きま す 。 
history オ ブ ジ ェクト の プロ パテ ィ と メソ ッ ド に は 、 以 下 の よ うな も の が あり ます 。 


history オブ ジェ クト は 、Web ペー ジ の 閲覧 履歴 に 関す る デー 
タタ を 管理 ・ 操 作 す る オブ ジェ クト で す 。 


替 history オブ ジェ クト の 構造 


2 | iocation フ ロバ ティ | 
オブ ジェ クト location プ ロ パ ティ 
history プ ロ パ ティ length プ ロ パ ティ 
navigator プ ロ パ ティ back() メ ソ ッ ド 
document プ ロ パ ティ forward() メ ソ ッ ド 


その 他 の プロ バテ ィ 、 メソ ッ ド 


















夫 history オブ ジェ クト の お も な プロ バテ ィ と メソ ッ ド 





プロ パテ ィ 名 (メソ ッ ド 名 ) 東和 
length プロ パテ ィ 閲覧 履歴 の 件 数 
back() メソ ッ ド 1 つ 前 の ペー ジ に 戻る 
forward() メソ ッ ド 1 つ 後 の ペー ジ へ 進む 
MEMO 


ユー ザー の プラ イバシー を 侵害 する こと を 
防ぐ た め 、history オ ブ ジ ェクト に は 、 閲 
覧 履歴 の URL を 取得 する する よう な プロ パ 
ティ や メソ ッ ド は あり ませ ん 。 
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at 


-ssn1 VIgatOF 
人 SS、 タ 4 オブ ジェ クト 


SECTION 


navigator オブ ジェ クト は 、 ブ ラウ ザ の 種類 や バー ジョ ン に 関 
/ する デー タ を 管理 し て いる オブ ジェ クト で す 。 





@ navigator オブ ジェ クト と は ? 


navigator オ ブ ジ ェクト は 、window オ ブ ジ ェクト の navigator プロ パテ ィ の 中 に 
和信 っ て いる オブ ジェ クト で す 。 ブ ラウ ザ の 種類 や バー ジョ ン に 関す る デー タ が 入っ た プ 
ロ パ ティ が 用 意 さ れ て いま す 。navigator オ ブ ジ ェクト の プロ パテ ィ に は 、 以下 の よう 
な も の が あり ます 。 


替 navigator オブ ジェ クト の 構造 


location プ ロ パ ティ 
history プ ロ パ ティ 


naVIgatOr プ ロ パ ティ 


document プ ロ パ ティ 


その 他 の プロ バテ ィ 、 メソ ッ ド 













window 
オブ ジェ クト 





navigator オ ブ ジ ェクト 






芝 navigator オブ ジェ クト の お も な プロ パテ ィ 

プロ パテ ィ 名 
appName ブラ ウザ の る 前 

apDVersion ブラ ウザ の バー ジョ ン 


ラウ ザ の ) こ は ブ ラ 
userAgent 人 正確 に は ブラ ウザ が HTTP リク エス ト の user-header 





以下 の よう に 書け ば 、 警 告 ダ イア ログ ボッ クス に ブラ ウザ の 情報 が 表示 され ます 。 


window.alert(window.navigator. userAgent ) : 


userAgent プ ロ パ ティ の 値 は 、 た と えば 、 ブ ラウ ザ に よっ て 、Web ペ ー ジ の 表示 内 
容 や デザ イン を 変え た いと き の 判 定 に 使わ れ ま す 。 
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ee 


-est  OCUIment 
s AA、4 オブ ジェ クト 1 


SECTION 


document オ ブ ジ ェクト は 、 ブ ラウ ザ に 読み 込ま れ て い 
叶 る HTML 文書 に 関す る デー タ が 入っ て いる オブ ジェ クト で 、 
window オブ ジェ クト の 中 で も っ と も 重要 な オブ ジェ クト で す 。 





念 document オ ブ ジ ェクト と は ? 


document オ ブ ジ ェクト は 、window オブ ジェ クト の document プ ロ パ ティ の 中 に 
ある オブ ジェ クト で す 。 ブ ラウ ザ で 表示 され て いる HTML 文書 や CSS の 内 容 を 取得 し 
た り 操 作 し た りす る た め に 使う プロ パテ ィ や メソ ッ ド が 用 意 さ れ て いま す 。 document 
オブ ジェ クト の プロ パテ ィ や メソ ッ ド に は 、 以 下 の よ うな も の が あり ます 。 


MSL 1ueunoop 区 
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幸 document オブ ジェ クト の 構造 


window 
オブ ジェ クト 


7/ 














document オ ブ ジ ェクト 










location プ ロ パ ティ 
history プ ロ パ ティ 
navigator プ ロ パ ティ 


ナ yYH 















document プ ロ パ ティ links プ ロ パ ティ の link オ ブ ジ ェクト 
その 他 の プロ バテ ィ 、 メソ ッ ド forms プ ロ パ ティ 4 form オ ブ ジ ェクト 
images プ ロ パ ティ image オ ブ ジ ェクト 


open() メ ソ ッ ド 







close() メ ソ ッ ド 
write() メ ソ ッ ド 


writeln() メ ソ ッ ド 







getElementsBy 
TagName() メ ソ ッ ド ほか 


その 他 の プロ パテ ィ 、 メソ ッ ド 


HTML 文 書 と は 、HTML フ ァイル 
に 書か れ た 中身 の こと で 、HTML 
ドキ ュ メ ント と も いい ます 。 文書 
(ドキ ュ メ ント ) 内 容 を 扱う つの で 
「document] オブ ジェ クト で す 。 
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替 document オブ ジェ クト の お も な プロ パテ ィ 


プロ パテ ィ 名 | な に 
ttle HTML 文書 の title 要素 の 内 容 
URL HTML 文書 の URL 
referrer HTML 文書 へ リン ク し て いる 文書 の URL 
lastModified HTML 文書 の 最終 更新 日 
links link オブ ジェ クト (文書 内 の すべ て の a 要素 と area 要素 ) 
forms form オブ ジェ クト (文書 内 の すべ て の form 要素 ) 
images image オブ ジェ クト (文書 内 の すべ て の img 要素 ) 


志 document オ ブ ジ ェクト の お も な メソ ッ ド 


メソ ッ ド 名 機能 


Open() 新しい 文書 の 出力 を 開始 する 

Close() 新しい 文書 の 出力 を 終了 する 

write() 文書 内 に 文字 列 を 出力 する 

writeln() 文書 内 に 文字 列 を 出力 し て 、 改 行 す る 

getElementsByTagName() 要素 を 取得 する 

getElementByld() id 名 に マッ チ す る 要素 を 取得 する 

getElementsByClassName() class 名 に マッ チ す る 要素 を 取得 する 

QuerySelector() CSS の セレ クタ 名 に マッ チ す る 要素 を 取得 する 
COLUMN 


link オブ ジェ クト 、form オブ ジェ クト 、 image オブ ジェ クト 

link オ ブ ジ ェクト は 、HTML 文書 の リン ク に 関す る 情報 を 取得 し た り 、 操作 し た りす る た め の オ 
ブ ジ ェクト で す 。 Iink オ ブ ジ ェクト の 実体 は 、links と いう 名 前 の 配列 で す 。 そ の 要素 に は 、 文 書 
内 の すべ て の リン ク (qa 要素 ) の デー タ が オブ ジェ クト と し て 入っ て いま す 。 た と えば 、HTML 
文書 内 の 上 か ら 2 番 目 の a 要 素 の URL 値 を 取得 する に は 、href プロ パテ ィ を 使っ て 、「document. 
links[1].href」 と 書き ます 。 

form オブ ジェ クト は 、HTML 文書 の フォ ー ム に 関す る 情報 を 取得 し た り 、 操作 し た りす る た め 
の オブ ジェ クト で す 。 form オ ブ ジ ェクト も また 、 実体 は forms と いう 名 前 の 配列 で す の で 、 要 
素 に は 、 文 書 内 の すべ て の フォ ー ム (form 要素 ) の デー タ が オブ ジェ クト と し て し まわ れ て い 
ます 。 

image オ ブ ジ ェクト は 、HTML 文書 の 画像 に 関す る 情報 を 取得 し た り 、 操 作 し た りす る た め の 
オブ ジェ クト で す 。 こ れ も ま た 実体 は images と いう 名 前 の 配列 で す 。 配列 の 要素 に は 、 文 書 内 
の すべ て の 画像 (img 要素) の デー タ が オブ ジェ クト と し て 入っ て いま す 。 
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Lesson 





DOM の 基本 的 な 使い 方 


ご この レッ スン で は 、JavaScript で HTML 
文書 の 中 身 を いろ いろ と 操作 する た め の し 
くみ で ある 、DOM の 基本 的 な 使い 方 を 学 
び ま す 。 





DOM と は 何 か ? 
要素 名 で 要素 を 取得 する 
要素 の 内 容 を 取得 する 
要素 の 内 容 を 変更 する 

id 属性 の 値 に マッ チ す る 要素 を 
取得 する 

6 class 属 性 の 値 に マッ チ す る 
要素 を 取得 する 


の らら OO OO 一 


Lesson 2 


. . . DOM と は 何 か ? 


SECTION 


JavaScript で HTML 文書 を デー タ と し て 扱う た め の し くみ で 
1 ある DOM に つい て 学び ます 。 





@ DOM と は 何 か ? 


DOM (Document Object Model) と は 、HTML 文書 を オブ ジェ クト と し て 読み 込 
ん で 操作 する た め の し くみ で す 。 異な る ブラ ウザ で も 等 し く 動 作 す る よう に 仕様 が 定め 
られ て いま す 。DOM を 使う と 、HTML 文書 や CSS の 内 容 を 、 オ ブ ジ ェクト を 扱う つの 
と 同じ 方 法 で 操作 する こと が で きま す 。 

た と えば 、 以 下 の よ うな HTML 文書 が あり ます 。 


1 1 <htm] 1ang="]a"> 

2 <head> 

垢 、 <tit1e> プロ グラ ム 実 行 テ スト </tit1e> 

4 ! </head> 

5 <body> 

6 ! <h1> プロ グラ ム 実 行 テス ト </h1> 

<p> 現在 は <strong>3 日 目 の レ ッ ス ン 1</strong> で す 。</p> 
8 ! </body> 

9 ! </htm1> 


この HTML 文書 は 、document プ ロ パ ティ の 中 に 、 次 の よう な お 構造 の オブ ジェ クト 
と し て 読み 込ま れ ま す 。 





document 
プロ バテ ィ 








その 他 の プロ パテ ィ 、 メソ ッ ド 


し か し 、 有 要素 名 を その まま オブ ジェ クト 名 や プロ パテ ィ 名 と し て は 使え ませ ん 。 要素 
を 操作 する に は 、document オ ブ ジ ェクト の メソ ッ ド を 使い ます 。 


べべ 











Lesson2 要素 名 で 要素 を 


、 . 取得 する IN 


SECTION 


読み 込ま れ た HTML 文書 の 中 か ら 、 要 素 名 (タグ 名 ) で 要素 を 
検索 し て 、 デ ー タ を 取得 する メソ ッ ド の 使い 方 を 説明 し ます 。 





@ HTML 文 書 の 要素 を デー タ と し て 取得 する に は ? 


HTML 文書 の 要素 を デー タ と し て 取得 する に は 、document オ ブ ジ ェクト に あら か 
じ め 用 意 さ れ て いる getElementsByTagName() メソ ッ ド を 使い ます 。 


再 構文 : getElementsByTagName() メソ ッ ド 


document . getE1ementsByTagName( ' 取得 し た い 要 素 名 ' ) 








取得 し た い 要 素 名 を 、 メ ソ ッ ド の 引数 に 指定 すれ ば OK で す 。 

大 文字 と 小文字 の 違い に 注意 し て くだ さい 。「get」 は すべ て 小文字 で す が 、 
「Elements」 「By」 「Tag] 「Name」 の 1 文字 目 は それ ぞ れ 大 文字 で す 。 ま た 、 要素 と い 
つ 意 味 の 「Elements」 に は 複数 形 を 表す 「s] が 付い て いま す 。 忘れ な いよ うに し まし ょ 
う 。 


の al 蔽 周 叶 半 彰 義明 区 | いざ ) 


人 @ p 要素 を 取得 する サン プル プロ グラ ム 


getElementsByTagName() メ ソ ッ ド を 使っ た サン プル プロ グラ ム を 作っ て み ま 
し よう 。Dp 要 素 を すべ て 取得 し て 変数 bs に 代入 し 、 最初 の p 要 素 を 警告 ダイ アロ グ ボ ッ 
クス に 表示 する プロ グラ ム で す 。 ソ ー ス コー ド を 入力 し て 、 実行 し て みて くだ さい 。 


く <body> MEMO 


1 
2 : <h1> プ ログ ラム 実行 テス ト </h1> 靖 還 還 詞 詞 記 
3 <p> 第 1 段落 </p> body 要 素 以外 は 省略 し て いま す 。 
4 ! <p> 第 2 段落 </p> 
5 <p> 第 3 段落 </p> 
kt ウン kt 
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6 く SCript> 

7 Var ps = document.getE1ementsByTagName('p'): 
8 alert(ps[9] ) : 

9 く / script> 

10 ! </body> 


この プロ グラ ム を 実行 する と 、3 つ ある p 要 素 が それ ぞ れ 、 配 列 の 要素 の よう な 形 と 
し て 、 変 数 ps に 代入 され ます (7 行 目 )。 取 得する 順番 は 、 先 頭 か ら 順 番 に な る の で 、 
ps[0] に 最初 の p 要 素 、 ps[1] に 2 番目 の p 要 素 、 p[2] に 3 番目 の p 要 素 が 代入 され ます 。 






document 
プロ パテ ィ 
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D 要素 が 
変数 ps に 


代入 され る 





。 





代入 され た p 要 素 は オブ ジェ クト に な っ て いま す 。 オ ブ ジ ェクト な の で 、 プ ロ パ ティ 
や メソ ッ ド が 用 意 さ れ て いま す 。 

この p 要 素 オ ブ ジ ェクト に は 、 次 の よう な プロ パテ ィ が 用 意 さ れ て いて 、 そ れ ぞ れ p 
要素 の 該当 する デー タ が 代入 され て いま す 。 


 p 要素 オ ブ ジ ェクト の お も な プロ パテ ィ 















p 要 素 に あたる オブ ジェ クト 
LinnerHTML プ ロバ ティ | 
Lid プ ロバ ティ 。 | 
Ltitle プ ロバ ティ = 
Llang プ ロバ ティ | 
Ldir プ ロバ ティ = 
| className プ ロバ ティ | 





Lpst] |… 








プロ バテ ィ 名 | 内 容 


innerHTML 要素 の 内 容 (テキ スト ) 





id id 属性 の 値 
ttle ttle 属性 の 値 
lang lang 属性 の 値 
dir dir 属性 の 値 


className class 属性 の 値 


1psy 2psy 





Lesson ” 表 人 


。 。 。 有 要素 の 内 容 を 取得 する 


SECTION 


要素 の 内 容 を デー タ と し て 取得 する に は 、innerHTML プロ パ 
1 ティ を 使い ます 。 





@ p 要素 の 内 容 を デー タ と し て 取得 する に は ? 


取得 し た 要素 の 内 容 を デー タ と し て 取得 する に は 、innerHTML プロ パテ ィ を 使い 
ます 。 


珍 innerHTML プロ パテ ィ の 参照 方 法 


オブ ジェ クト 名 .innerHTML 


た と えば 、ps[0] に オブ ジェ クト と し て 代入 され て いる 0 要素 の 内 容 を 取得 し て 、 警 
告 ダ イア ログ ボッ クス に 表示 する に は 、 次 の よう に 書き ます 。 


7 Var ps = document.getE1ementsByTagName('D'): 
8 , alert(ps[9] .innerHTML ) : 


JavaScript の アラ ー ト B 最初 の D 要素 の 内 容 が 
3 表示 され る 


人 











innerHTML プロ パテ ィ で 取得 し た 要素 の 内 容 は 、 文 字 列 と し て 取得 され ます 。 た と 
えば 、 要 素 の 内 容 が 「2 3] と いう 数 値 や 演算 子 で あっ て も 、 計算 され ず に その まま 「2 
寺 3] と いつ 文字 列 て と し て 表示 され ます 。 

また 、innerHTML プロ パテ ィ で 取得 し た 要素 の 内 容 に 別 の 要素 (た と えば b 要 素 ) が 
含ま れる 場合 は 、、 そ の タグ も 文字 列 と し て 取得 され ます 。 た と えば 、p 要 素 の 内 容 が 
「 く b> 第 2 く </b> 要素 ] と いう 内 容 で あれ ば 、「<b> 第 2</b> 要素 ] と いつ 文字 列 と し 
て 表示 され ます 。 
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Lesson 2 
。 。 。 有 要素 の 内 容 を 変更 する 
SECTION 
innerHTML プロ パテ ィ で 取得 し た 要素 の 内 容 を 変更 する と 、 ブ 
4 ラウ ザ で の 表示 も 変更 され ます 。 


@ p 要 素 の 内 容 を 変更 する に は ? 


取得 し た p 要 素 の 内 容 を 変更 する に は 、 先 ほど と 同じ く innerHTML プロ バテ ィ を 
使い ます 。 innerHTML プロ パテ ィ に 文字 列 を 代入 すれ ば 、 要 素 の 内 容 は 代入 し た 文字 
列 に 変更 され ます 。 使 い 方 は 、 こ れ ま で に 学ん だ 変数 や プロ パテ ィ と 同じ で す 。 


再 innerHTML プロ パテ ィ へ の 代入 方 法 


オブ ジェ クト 名 .innerHTML 





た と えば 、ps[0] に 入っ て いる p 要 素 の innerHTML プロ パテ ィ を 「 パ ラグ ラフ No.1」 
に 変更 し て み ま し よう 。 


く SCPiDpt> 

Var ps = document.getE1ementsByTagName('D'): 
PS[9] .innerHTML = "パラ グラ フ No.1': 

く / Script> 


〇 の OO ヽ こ !) の 


innerHTML プロ パテ ィ の 値 を 変更 する と 、 も と も と の 要素 の 内 容 が 上 書き され る の 
で 、 ブ ラウ ザ で の 表示 も 変更 後 の 内 容 に な り ま す 。 

今回 の 例 で は 、「 第 1 段落] と いつ 文字 列 が 、 「 パ ラグ ラフ No.1」 と いつ 文字 列 に 変わ っ 
て 、 ブ ラウ ザ に 表示 され ます 。 
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Po っ PTG55203I ご mg 三 最初 の D 要素 の 内 容 が 
ブロ グラ ム 実 行 テス ト 変更 され た 


パラ グラ フ No 1 


ビ 
の 
の 
の 
O 
っ 


第 2 段落 
第 3 段 沙 





@ p 要素 の 内 容 に 文字 列 を 追加 し た いと き は ? 


innerHTML プロ パテ ィ を 使え ば 、p 要 素 の 内 容 を 上 書き せ ず に 、 元 の 内 容 に 文字 列 
を 付け 加 そ る 、 と いう こと も 可能 で す 。 た と えば 、「 第 1 段落] の あと に 「 (New!) 」 と い 
つ 文 字 列 を b 要 素 に し て 付け 加え た い 場 合 は 、 こ の よう に 書き ます 。 


く SCPiDt> 

Var ps = document.getE1ementsByTagName('Dp' ): 

ps[1] .innerHTML = ps[1] .innerHTML + '<b> (New ! ) </b>': 
! く / script> 


の al 洒 周 HO33S 癌 期 区 | N3 


〇 OO ヽ SO の 


プロ グラ ム を 実行 する と 、「[ 第 1 段落 ] と いつ 文字 列 の あと に 「 (New!) 」 と いう 文字 列 
が 追加 され て 、 ブ ラウ ザ に 表示 され ます 。 


75eTTO35205hmkoD ミ 最初 の p 要素 の 内 容 に 
プロ グラ ム 実 行 テ スト 文字 列 が 追加 され た 


第 1 段 座 (New !) 
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記 





es id 属性 の 値 に マッ チ 
人 ム する 要素 を 取得 する 


SECTION 


読み 込ま れ た HTML 文書 の 中 か ら 、 要 素 の id 属性 の 値 で 要素 を 
5 検索 し て 、 デ ー タ を 取得 する こと も で きま す 。 





@@ 要素 を id 属性 の 値 で 検索 する に は ? 


id 属性 の 値 で 検索 し て 、 マ ッ チ する 要素 を デー タ と し て 取得 する に は 、document 
オブ ジェ クト の getElementByld() メ ソ ッ ド を 使い ます 。 


珍 構文 : getElementByld() メソ ッ ド 





document .getE1ementByTd( '1d 属 性 の 値 ') 
取得 し た い 有 要素 名 の id 属性 の 値 を 、 メ ソ ッ ド の 9| 数 に 指定 すれ ば OK で す 。 


getElementsByTagName() メ ソ ッ ド と 違っ て 、getElementByld() メソ ッ ド の 「Element」 は 
単数 形 で す 。 こ れ は 、1 つの HTML 文書 に は 、id 属性 の 値 が 同じ 要素 は 存在 し な い 、 つ まり 当て 
は まる 要素 (element) は 1 つ だ け だ か ら で す 。 


@ id 属性 値 で 要素 を 取得 する サン プル ブ プログ ラム 


getElementByld() メ ソ ッ ド を 使っ た サン プル プロ グラ ム を 作っ て み ま し ょ つう 。 id 属 
性 の 値 が bottom で ある 要素 を 取得 し て 変数 i に 代入 し 、 内 容 を 警告 ダイ アロ グ ボ ッ ク 
ス に 表示 する プロ グラ ム で す 。 ソ ー ス コー ド を 入力 し て 、 実行 し て みて くだ さい 。 








<body> 


<p 1d="top"> 第 1 段落 < 


く SCP1Dt> 


alert(i.innerHTML ) : 
< く / Script> 
</body> 


〇 C OO ヽ へい の の 6 OO NO 一 


ー ト 
の 


1 


この プロ グラ ム を 実行 する と 、id 属 性 の 値 が 「bottom] で ある 要素 、 つ まり 3 番目 
の p 要 素 が 、 変 数 if に オブ ジェ クト と し て 代入 され ます (7 行 目 )。 そ の オブ ジェ クト の 
innerHTML プロ パテ ィ の 値 が 、 警 告 ダ イア ログ ボッ クス に 表示 され ます (8 行 目 )。 


JavaScript の アラ ー ト 


第 3 段 矯 





COLUMN 


DOM で 使え る その 他 の メソ ッ ド 


この レッ スン で 紹介 し た ほか に も メソ ッ ド は あり ます 。 お も な メソ ッ ド を 挙げ て お きま す 。 


メソ ッ ド の 書き 方 と 引数 
document.querySelector( セレ クタ ) 


/D> 





document.querySelectorAllI( セレ クタ ) 


要素 .getAttribute(' 属 性 ) 

要素 .setAttribute(' 属 性 , ' 属 性 値 1) 
document.createElement( 要素 ) 
要素 1.appendChild(' 要 素 2) 


3psy の 


<h1> プロ グラ ム 実 行 テ スト </h1> 


<D cl1ass="contents"> 第 2 段落 </p> 
<p 1d="bottom"> 第 3 段落 </p> 


Var i = document.getE1ementByTd( 'bottom' ) 


id 属性 値 が 「bottom」 で ある 


3 番目 の p 要 素 が 取得 され た 


に 


セレ クタ (CSS) に マッ チ す る 要素 を 1 つ 取 得する 
セレ クタ に マッ チ す る 要素 を すべ て 取得 する 


要素 の 属性 値 を 取得 する 
属性 値 を 属性 値 1 に 変更 する 
新しい 要素 を 作る 


要素 2 を 要素 1 の 子 要素 と し て 追加 する 


GOAL 
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< 


Qiol 芳 対 付 滞 表 の HI 由 
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人 


2 ClaSS 属性 の 値 に マッ チ 
ly 全 4 する 要素 を 取得 する 


SECTION 


読み 込ま れ た HTML 文書 の 中 か ら 、 要 素 の class 属性 の 値 で 要 
9 素 を 検索 し て 、 デ ー タ を 取得 する こと も で きま す 。 





@ 要素 を class 属性 の 値 で 検索 する に は ? 


class 属 性 の 値 で 検索 し て 、 マ ッ チ する 要素 を デー タ と し て 取得 する に は 、 
getElementsByClassName() メソッド を 使い ます 。 


一 構文 : getElementsByClassName() メソ ッ ド 





document.getE1ementsByC1assName( 'c1ass 属 性 の 値 ') 


取得 し た い 要 素 名 の class 属 性 の 値 を 、 メ ソ ッ ド の 3 ぅ | 数 に 指定 し ます 。 


人 @ claSS 属性 値 で 要素 を 取得 する サン プル プロ グラ ム 


getElementsByClassName() メ ソ ッ ド を 使っ た サン プル プロ グラ ム を 作っ て み ま 
し よう つう 。 前 の セク ショ ン で 作っ た サン プル プロ グラ ム の 7 行 目 と 8 行 目 を 以下 の よう に 
変え て 、 実行 し て みて くだ さい 。 


仁 還 Var c = document.getE1ementsByC1assName( 'contents' ) : 
8 alert(c[9] .innerHTML ) : 


実行 し て 、「 第 2 段落 ] と 表示 され れ ば 成功 で す 。 こ の プロ グラ ム を 実行 する と 、 
class 属性 の 値 が 「contents] で ある 要素 が 、 配 列 の 要素 の よう な 形 と し て 変数 c に 代 
和信 され ます (7 行 目 )。 そ の オブ ジェ クト の c[0] の innerHTML プロ パテ ィ の 値 が 、 警 
告 ダ イア ログ ボッ クス に 表示 され ます (8 行 目 )。 同 じ class 属 性 値 を 持つ 要素 は 、1 
つの HTML 文 書 の 中 に 複数 存在 する 可能 性 が ある の で 、 変 数 へ の 代入 の され 方 は 、 
getElementsByTagName() メソ ッ ド と 同じ に な り ま す 。 








LesSon 





イベ ント と 
イベ ント ハン ドラ 
この レッ スン で は 、JavaScript で よく 使 


われ る 、 イ ベン ト と イベ ント ハン ドラ の 基 
本 的 な 使い 方 を 学び ます 。 


っ へい の の ① らら OO DD 一 


イベ ント と は 何 か ? 

イベ ント ハン ドラ の 使い 方 

開始 タグ の 中 で 関連 付け る 方 法 
プロ パテ ィ を 使っ て 関連 付け る 方 法 
load イベ ント の 使い 方 
addEventListener() メソ ッ ド 

タッ チ デ バイ ス の イベ ント 
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Lesson 3 


\ーーーーーーーーーーーーー 一 プ 


ドコ 
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. イベ ント と は 何 か ? 


JavaScript の プロ グラ ム で は よく 使わ れる 、 イ ベン ト の 基本 に 
つい て 説明 し ます 。 


@$ イ ベン ト と は ? 


イベ ント と は 、 ブ ラウ ザ 上 で ユー ザー が 行う さま ざま な お 動作 の こと で す 。 た と えば 、 


ブラ ウザ 画面 上 で の マウ ス の 
クリ ッ ク や ダブ ルク リッ ク 、 
マウ スポ イン タ の 移動 、 マ ウ 
スポ ボタン の 押し 下げ ・ 放 し な 
ど が イベ ント に な り ま す 。 





イベ ント に は イベ ント 名 が 付け られ て いま す 。 お も な イベ ント 名 は 以下 の と お り で す 。 





軍 お も な イベ ント 
イベ ント 名 | いつ 発生 する か ? MEMO 
load 読み 込み が 終わ っ た と き 。 で 
click マウ ス を クリ ッ ク し た と き と 00 に お 2 全 は だ 
dblclick マウ ス を ダブ ルク リッ ク し た と き 人 
mouseover マウ スポ イン タ が 要素 に 重なっ た と き 
mouseout マウ スポ イン タ が 要素 か ら 外 れ た と き 
mousedowh マウス ボ タン を 押し た と き 
mousermove マウ ス を 移動 し た と き 
ImOuSeUD マウ スポ ボ タン を 放し た と き 


JavaScript を 使う と 、 イ ベン ト の 発生 を きっ か け に し て 、 何 ら か の 処理 を 実行 させ 
る こと が で きま す 。 こ ご の 処理 の こと を 、 イ ベン ト ハ ンド ラ と いい ます 。 








Lesson3 イベ ン トバ ハン ドラ の 
sw 使い 方 


SECTION 


イベ ント ハン ドラ を 使っ た プロ グラ ム を 作る た め に 必要 な 、 基 本 
的 な 考え 方 を 学び ます 。 





@$ イ ベン ト ハ ンド ラ を 使う に は ? 


イベ ント は 、HTMIL 文書 の 要素 単位 で 発生 し ます 。 イ ベン ト ハ ンド ラ を 使っ た プロ 
グラ ム を 作る に あたっ て 、 考 えな く て は な ら な い ポ イン ト が 3 つ あ り ま す 。「 要 素 ] と 「 イ 
ベン トド 」 と 「 イ ベン トバ ハン ドラ 」 で す 。 


① ど の 要素 に ? 
② ど の イベ ント が 発生 し た と き に ? 
③⑬ ど の イベ ント ハン ドラ を 実行 する か ? 


た と えば 、h1 要素 が クリ ッ ク さ れ た と き に 、 警 告 ダ イア ログ ボッ クス に 「 イ ベン ト が 
発生 し た ! 」 と いう 文字 列 が 表示 され る よう な サン プル プロ グラ ム を 作っ て みた いと し 
ます 。 3 つの ポイ ント は この よう に な り ま す 。 


①h1 要素 に (要素 ) 
② ク リッ クイ ベン ト が 発生 し た と き (イベ ント ) 
③ 警 告 ダ イア ログ ボッ クス を 表示 する (イベ ント ハン ドラ ) 


その 上 で 、 対 象 と な る 「 要 素 ] と 「 イ ベン ト 」 と 「 イ ベン トバ ハン ドラ ] を 関連 付け る 方 法 は 、 
お も に 2 つ あ り ま す 。 開始 タグ の 中 で 関連 付け る 方 法 と 、 プ ロ パ ティ を 使っ て 関連 付け 
る 方 法 で す 。 

順番 に 見 て いき まし ょ うつ 。 


Day 





テー 
の 
の 
の 
O 
っ 


ご 涼 SI テマ ニテ マス へ 区 | CS 


KDD 3 さき GOAL 
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-*ses 開始 タグ の 中 で 
4 関連 付け る 方 法 


SECTION 


イベ ント と イベ ント ハン ドラ の 関連 付け を 、 開 始 タ グ の 中 の 属性 
1 を 使っ て 行う 方 法 を 説明 し ます 。 





人 @ 開始 タグ の 中 で 関連 付け る に は ? 
1 つ 目 は 、 対 象 と な る 要素 の 開始 タグ の 中 に 書く 方 法 で す 。 


再開 始 タ グ の 中 に 書く 方 法 


< 要素 名 on イベ ント 名 =" イベ ント ハン ドラ "> ~ </ 要素 名 > 





今回 の 場合 、h1 要素 の 開始 タグ の 中 に 、 こ の よう に 書き ます 。 


] <!DOCTYPE htm1> 

<htm1] 1ang="]a"> 

, く head> 

<meta charset="utf-8"> 

<tit1e> プロ グラ ム 実 行 テ スト </tit1e> 

</head> 

く <body> 

<h1 onc1ick="window.a1ert(' イベ ント が 発生 し た ! '):j"> プロ グ 
! ラム 実行 テス ト </h1> 

9 </body> 

10 ! </htm1> 


oO つい の の 6 OO DO 一 


プロ グラ ム を 実行 し て 、h1 要素 を クリ ッ ク す る と 、 警 告 ダ イア ログ ボッ クス が 表示 








され ます 。 
WW h1 要素 を クリ ッ ク す る と 
イベ ント が 弄 し た | 警告 ダイ アロ グ が 表示 され る 
し 2」 
1 レア 
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onclick の 部 分 を 書き 換え れ ば 、 他 の イベ ント で も 応用 可能 で す 。 
替 mouseover イベ ント の 場合 


8 』 <h1 onmouseover="window.alert(' イベ ント が 発生 し た ! ')j"> プ 
ログ ラム 実行 テス ト </h1> 


替 dblclick イベ ント の 場合 


8 ! <h1 ondb1c1ick="window.alert(' イベ ント が 発生 し た ! '):"> プロ 
, グラ ム 実 行 テ スト </h1> 


人 @ び イベ ント ハン ドラ を 関数 に する に は ? 


今回 の イベ ント ハン ドラ を 関数 に する こと も で きま す 。 関数 に する に は 、 こ の よう に 
書き ます 。 


! <IDOCTYPE htm1> 







1 

2 ( <htm1 1ang="]a"> 

3 , <head> 

4 く <meta charset="utf-8"> 

5 <tit1e> プロ グラ ム 実 行 テ スト </tit1e> 

6 <SCript> 

7 function strC1ick( ) { 

8 window.a1ert(' イ ベン ト が 発生 し た ! "): 
9 : } 

10 ! </script> 

11 </head> 

12 く <body> 

13 ! <h1 onc1ick="strC1ick()"> プロ グラ ム 実 行 テ スト </h1> 
14 </body> 

15 ! </htm1> 


Script 要素 の 中 で 定義 し た strClick() 関数 を 、h1 要素 の onclick 属 性 の 値 に 指定 し 
て 呼び 出し て いま す 。 


ゃ 
3psy 9 ct の 1 
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es プロ パテ ィ を 使っ て 
4 関連 付け る 方 法 


SECTION 


イベ ント と イベ ント ハン ドラ の 関連 付け を 、 プ ロ パ ティ を 使っ て 
行 つ 方法 を 説明 し ます 。 





$ プ ロバ ティ を 使っ て 関連 付け る に は ? 


2 つ 目 の 方 法 は 、 プ ロ パ ティ を 使う 方 法 で す 。 イ ベン ト 対 象 と な る 要素 を 
getElementById() メ ソ ッ ド で 取得 し て 変数 に 代入 し ます 。 そし て 、 そ の プロ パテ ィ と 
し て イベ ント を 指定 し 、 プ ロ パ ティ の 値 と し て イベ ント ハン ドラ を 指定 する と いつ 方 法 
で す 。 

宙 プロ パテ ィ で 関連 付け る 方 法 


オブ ジェ クト 名 .on イ ベン ト 名 = function() { 
イベ ント ハン ドラ 





この 方 法 を 使っ た サン プル プロ グラ ム は 、 以 下 の と お り で す 。 


3 ( <head> 

4 く <meta charset="ut 千 -8"> 

5 <tit1e> プロ グラ ム 実 行 テ スト </tit1e> 
6 </head> 
2 
8 

9 


, く body> 
! <h1 id="header"> プロ グラ ム 実 行 テ スト </h1> 
く <SCriDt> 

10 var e = document.getE1ementByTd( 'header' ) 
11 e.onc1ick = function( ) { 
12 』 window.a1ert(' イベ ント が 発生 し た ! '): 
13 ! } ぅ 
14 </script> 
15 “ </body> 


IE レバ 
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ます ず 、getElementByld() メ ソ ッ ド で h1 要素 を オブ ジェ クト と し て 取得 し 、 変 数 e 
に 代入 し ます (10 行 目 )。 そ し て 、 変 数 e の onclick プロ パテ ィ に 、 関 数 と し て イベ ン 


トルン ドラ を 代入 し ます (11 13 行 目 ) 。 Lesson 
プロ グラ ム を 実行 し て 、h1 要素 を クリ ッ ク す る と 、 警 告 ダ イア ログ ボッ クス が 表示 
され ます 。 


人 2777U5eTIO3C205NK27Dep5 h 1 要素 を み リ 団 の する と 
プロ JavaScript の アラ ー ト 了 警告 ダイ アロ グ が 表示 され る 





10 一 13 行 目 の 処理 は 、 変 数 を 使わ むず 、 こ の よう に 書い て も か まい ませ ん 。 


10 document.getE1ementByTd( 'header' ) .onc1ick = 


0 function( ) { 
2 window.alert(' イベ ント が 発生 し た ! "): 
kN 1 


嘱 Ql の で 語 磁 更 O 浴 計 へ 山 ニ ロ \ 区 | 


人 @$ イ ベン ト 名 は すべ て 小文字 で 書く 


プロ パテ ィ と し て イベ ント 名 を 使う と き は 、 必 ず す べ て 小文字 で 書か な く て は いけ ま 
せん 。 


〇 e.onc1ick = function( ) { 
X e.onC1ick = function( ) { 
〇 document. getE1ementByTd( 'header' ) .onc1ick 


X document . getE1ementByTd( 'header' ) .onC1ick 


大 文字 を 混ぜ て 書い て し まう と 、 プ ログ ラム が エラ ー に な り 、 実行 され ませ ん 。 注意 
し て くだ さい 。 


3osy - 立 呈 の 
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ws load イベ ント の 
4 使い 方 


ドコ | 


3-3-1 で 紹介 し た イベ ント の 中 か ら 、 他 の イベ ント と は 異な る 使 
で われ 方 を する load イベ ント に つい て 説明 し ます 。 





@ |oad イベ ント と は ? 


load イ ベン ト は 、 関 連 付け られ た 要素 を 読み 込み 終わ つた と き に 発生 する イベ ント 
で す 。body 要 素 な ら body 要素 が 、img 要素 な ら img 要 素 が 読み 込み 終わ つた と き に 
発生 し ます 。 

load イ ベン ト に イベ ント バハ ンド ラ を 設定 する 場合 で す が 、body 要 素 に 設定 する と き 
は 、window.onload プロ パテ ィ に 設定 し ます 。 こ れ は load イベ ント だ け で な く 、 他 の 
イベ ント も 同様 で す 。 


世 構文 : body 要素 の load イベ ント に イベ ント ハン ドラ を 設定 


window.on1oad = function( ){ イ ベン ト ハ ンド ラ )}: 





その 他 の 要素 に 設定 する 場合 は 、 取 得 し た 要素 オブ ジェ クト の onload プロ パテ ィ に 
設定 し ます 。 こ れ は 2-3-4 で 紹介 し た 方 法 と 同じ で す 。 


執 構文 : その 他 の 要素 の load イベ ント に イベ ント ハン ドラ を 設 


要素 オブ ジェ クト 名 .on1oad = function( ){ イ ベン ト ハ ンド ラ }: 





本 body 要素 が 読み 込ま れ た と き に 警告 ダイ アロ グ ボ ックス が 表示 され る よ 
サン プル プロ グラ ム は 、 こ の よう に な り ま す 。 


3 ( <head> 

4 <meta charset="ut 和 f-8"> 

5 ! <tit1e> プロ グラ ム 実 行 テ スト </tit1e> 
6 』 く Script> 

4 window.on1oad = function( ){ 
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朋 


馬 alert(' イ ベン ト が 発生 し た ! "): 


秒 }) ぉ 

10 く </ Script> 

11 ! </head> 

12 <body> 

13 “ <h1> プロ グラ ム 実 行 テ スト </h1> 


14 , </body> 


@ window.onload の 特殊 な 使い 方 


これ まで の レッ スン で 紹介 し て きた DOM や イベ ント ハン ドラ は 、 じ つ は 設置 する 場 
所 に よっ て は 、 き ちん と 実行 され な いこ と が あり ます 。 

た と えば 、3-3-4 で 紹介 し た サン プル で す が 、 以 下 の よ うに 、script 要 素 を h1 要素 
より も 前 に 書く と 、 ク リッ ク し て も イベ ント ハン ドラ は 実行 され ませ ん 。 


と ど 浪 ナマ > へ Dol | (へ 月 9 


了 ! く <body> 

8 く <SCr1Dt> 

9 ・ var e = document.getE1ementByTd( 'header' ) 
10 e.onc1ick = function( ) { 

明 window.a1ert(' イベ ント が 発生 し た ! '): 

12 : 員 

13 く / script> 

14 』 <h1 id="header"> プロ グラ ム 実 行 テ スト </h1> 

15 ] </body> 


この 原因 は 、1-3-1 で 説明 し た プロ グラ ム の 実行 順 で す 。 プ ログ ラム は 通常 、 先 頭 か 
ら 順 番 に 実行 され ます 。 こ の プロ グラ ム の 場合 、9 行 目 で id 属性 値 が header で ある 要 


素 を 取得 し よう と し て いま す 
id 属性 値 が header 
の 要素 を 取得 


が 、 そ の 時 点 で まだ h1 要素 は 
読み 込ま れ て いま せん 。 つ ま 
取得 し た 要素 に 
イベ ント ハン ドラ 設定 


り 、 対 象 と な る 要素 が な いた 
h1 要 素 (#header) 


要素 が 見 つか ら な い 
設定 で き な い 











め 、 結 果 と し て 、 イ ベン ト 八 
ンド ラ が 設定 され な い の で す 。 





3psy る ci. 
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書く 場所 に よっ て 実行 が 左右 され な いよ うに する に は 、DOM や イベ ント ハン ドラ の 
ソー スコ ー ド を 、 ま る ご と window.onload の イベ ント ハン ドラ と し て 設定 する と いう 
方 法 が あり ます 。 具体 的 に は 、9 行 目 と 14 行 目 に 、 以 下 の よ うな 記述 を 挿入 し ます 。 


7 <body> 

き く Script> 

9 『 window.on1oad = function( ){ 

10 『 Var e = document.getE1ementByTd( 'header' ) : 
11 e.onc1ick = function( ) { 

12 window.a1ert(' イベ ント が 発生 し た ! '): 
13 : }: 

14 : 陳 

15 く / script> 

16 ! <h1 id="header"> プロ グラ ム 実 行 テス ト </h1> 
17 </body> 


この よう に 書く と 、10 ~ 13 行 目 の ソ ー ス コー ド は 、 必 ず body 要素 内 の すべ て の 要 
素 が 読み 込み 終わ つて か ら と 実行 さ れる よう に な り ま す 。 

つま り 、script 要 素 を HTML 文書 内 の どこ に 配置 し て も 、 要 素 を 取得 で き 、 イ ベン 
トバ ルン ドラ を 設定 する こと が で きる よう に な る の で す 。 

と いつ わけ で 、DOM を 使っ た 処理 を 書く 場合 は 、HTML 文書 の どこ に 書い て も いい 
で す が 、 処 理 を 丸ごと window.onload プロ パテ ィ の イベ ント ハン ドラ と し て 設定 する 
よう に し て くだ さい 。 
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-*seos dQOEVventListener() 








w @ 4 ソ ツ ド Lesson 


SECTION 


1 つの イベ ント に 複数 の イベ ント ハン ドラ を 設定 で きる 
addEventListener() メソ ッ ド に つい て 説明 し ます 。 





@ addEventListener() メソ ッ ド の 使い 方 / 
これ まで に 紹介 し て きた 2 つの 方 法 で は 、1 つの 要素 や 1 つの イベ ント に 対し て 、1 
つの イベ ント ハンドラ し が 設定 で きま せん 。 
1 つの イベ ント に 複数 の イベ ント ハン ドラ を 設定 し た いと き に は 、 
addEventListener (アド イベ ント リス ナー) メソ ッ ド を 使い ます 。 


朝 構文 : addEventListener() メソ ッ ド 


要素 名 .addEventListener(' イ ベン ト 名 ', function( ){ 
イベ ント ハン ドラ 


}, fa1se ) 


く x ()』eue1SI]1ueA ヨ DDe 区 | も 





ヒコ 
m 


た と えば 、h1 要素 の クリ ッ ク イ ベン ト に 、 警 告 ダ イア ログ ボッ クス を 表示 する イベ 
ント バハ ンド ラ と 、h1 要素 の 文字 の 色 を 赤 に する イベ ント ハン ドラ を 設定 する に は 、 以 
下 の よ うに 書き ます 。 


テ こ 


9 ] window.on1oad = function( ){ 
10 var e = document.getE1ementByTd( 'header' ) 
LN e.addEventListener('c1ick', function( ) { 
12 ! window.alert(' イベ ント が 発生 し た ! "): 
13 }, false): 
14 e.addEventListener('c1ick'、 function( ) { 
15 e.style.color = 'red': 
16 }, fa1se)}: 
17 : ): 
3psy GOAL 
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タッ チ デ バイ ス の 
イベ ント 


SECTION 





スマ ー ト フォ ン や タブ レッ ト 上 端末 な どの タッ チ デバ イス で は 、 画 
/ 面 上 の 要素 を 指 で 操作 する た め 、 マ ウス イベ ント の 代わ り に 、 タ ッ 
チイ ベン ト が 使わ れ ます 。 
@ タ ッ チ イベ ント と は ? 


スマ ー ト フォ ン や タブ レッ ト 端 末 な どの タッ チ デ バイ ス の 操作 に は 、 マ ウス は 
使い ませ ん 。 よ っ て 、 マ ウス 関連 の イベ ント で ある mouseover、mouseout、 
mousedown、mousemove、mousedown は 使う つこ と が で きま せん 。 

その 代わ り に 用 意 さ れ て いる の が 、 タ ッ チ イベ ント で す 。 

タッ チイ ベン ト に は 、touchstart、touchmove、touchend の 3 つが あり ます 。 





touchstart touchmove touchend 
宙 タッ チイ ベン ト 
イベ ント 名 内 容 





touchstart タッ チ が 始ま っ た と き 
touchmove タッ チ し た まま 移動 し た と き 
touchend タッ チ が 終わ っ た と き 


タッ チイ ベン ト で は 、 タ ッ チ し て いる 指 の 数 も 認識 する こと が で きま す 。 タ ッ チ イベ 
ント を 使え ば 、 指 を 2 本 使っ た 動作 で ある ピン チイ ン や ピン チア ウト な どの 動き に 対応 
し た プロ グラ ム も 作れ ます 。 


IE と 










Day Lesson 





JQuery の 使い 方 


この レッ スン で は 、 jQuery の 基本 的 な 使 
い 方 を 学び ます 。 


jQuery と は 何 か ? 

jQuery を イン スト ー ル する 

jQuery を 読み 込む 設定 を する 
JQuery の 記述 方 法 

CSS() メソ ッ ド で 要素 の 色 を 変え る 
html() メソ ッ ド で 要素 の 中 身 を 変え る 
fadeOut() メソ ッ ド で 

アニ メー ショ ンタ 効 果 

メソ ッ ド を 繋げ て 書く メソ ッ ド チェ ー ン 
9 イベ ント 処 理 を 設定 する 


QNO の の いら OO NO 一 


3osy GOAL 
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「 


Lesson 4 


jQuery と は 何 か ? 


SECTION 


ここ ご 最 近 、JavaScript で プロ グラ ム を 作る と き に よく 使わ れ て 
1 いる jQuery と は 何 な の か を 説明 し ます 。 


@ jQuery と は ? 


jQuery と は 、JavaScript の ライ ブラ リ の 1 つ で す 。 ライ ブラ リ (図書 館 ) と いつ の は 、 
まさ に その 名 前 の と お り 、 プ ログ ラマ に と っ て の 図書 館 の よう な も の で 、 先輩 プロ グラ 
マ が 、 い ろ い ろ な プロ グラ ム で 共通 し て 使わ れる こと の 多い 処理 を 切り 出し て 、 あ ら か 
じ め ま と め て お いて くれ て いる 、 プ ログ ラム パー ツ の 集合 体 の こと で す 。 お か げ で 、 族 
で も 、 い つ で も 、 無 料 で 、 便 利 な 機能 を 使え る よう に な っ て いま す 。 


替 ライ ブラ リ は プロ グラ ム パ ー ツ の 集合 体 





ライ ブラ リ を 使う こと 、 プ ログ ラム を ゼロ か ら 作 る より も 、 手間 を か けず に 、 短 時 間 で 
作る こと が で きま す 。 ま た 、 同じ よう な お 処理 を 、 何 度 も 繰り 返し 書く 必要 が あり ませ ん 。 
これ か ら 学 ぶ jQuery は 、DOM 操作 関連 の 機能 を 集め た ライ ブラ リ で す 。 


JavaScript の ライ ブラ リ に は 、 jQuery の 他 に も いろ いろ あり ます 。 プ ログ ラム 設計 の た め の フ 
レー ム ワ ー ク (AngularJS な ど )、DOM 操 作 (圧倒 的 に JQuery が 使わ れ て いる )、 ス マ ホ サ イ 
ト 制 作 (Query Mobile など) 、 グ ラフ ィ ッ ク 関 連 (three.jS、D3.jS な ど ) な ど が あり ます 。 





Day 





-e4 jQuery を 
4 イン スト ー ル する 


SECTION 





jQuery を 使う に は 、 jQuery ファ イル を ダウ ン ロ ー ド し て 、 適 
切な フォ ル ダ に 保存 する 必要 が あり ます 。 





価 jQuery の イン スト ー ル 方 法 


]Query の ファ イル を 、 公 式 サ イト か ら ダ ウン ロー ド し て 、 保存 し ます 。 


eosge oo 時 | 検索 サイ ト で 「jquery」 と 検索 する な ど し 
0 て 、「http://jquery.com」 を 開く 


⑳ 「Download」 ボ タン を クリ ッ ク 


@ の gl デー ブユ RT AJenO「 区 | 5 


FT| 
ee 。 


サイ ト の デザ イン が 変わ っ て いる 場合 は 、 
「Download] と いう ボタ ン や 文字 を 探し て クリ 
ッ ク し て くだ さい 。 


《》 画面 を スク ロー ル し て 、 最 新 バ ー ジ ョ ン 
を 探す 


執筆 時 点 の 最新 バー ジョ ン は 2.1.1 で す 。 も し も 
っ と 新しい も の が あれ ば 、 以 下 「2.1.1」 の 部 分 は 、 
最新 版 の 数 字 に 読み 替え て くだ さい 。 





KO 
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⑳「Download the compressed, 
production jQuery 2.1.1」 を クリ ッ ク 


MEMO 

「compressed (圧縮 )] は 、 ソ ー ス コー ド か ら 
不要 な スペ ー ス や 改行 を 取り 除い て 、 フ ァイル サ 
イズ を 小さ くし て ある ファ イル で す 。 





Ctrl キー+「S」 キー を 押し て 、 フ ァイル 
保存 ダイ アロ グ を 表示 





| 
| 
区 了 9 捕 較 5 = ココ 
1 マン mr 


0 PU 
OH 


EE 9 
2 5 ーー 


OOfTT 






5 な 











⑯ sample.html と 同じ フォ ル ダ に 保存 





MEMO 
ファ イル 名 の 拡張 子 が 「.jS}、 フ ァイル の 種類 が 
ro 了 P デ mmmeoeeaeaaeeeeeo 「JavaScript File」 に な っ て いる が 確認 し て くだ 
さい 。 





2 保存 し た ファ イル の 名 前 を 「jquery.jS」 
に 変更 














と 2 コン テ ee 5 ea 寺村 休日 時 2WMASMn2 hd 


jQuery ファ イル の イン ス トー ル は これ で 終わ り で す 。 


| 


_*so4 AUery を 読み 込む 
人 4 設定 を する 


ド 1 ユ ev 


1 jQuery ファ イル を 読み 込む た め の 行 を 書き 加え ます 。 





@ jQuery を 読込 む 設 定 


ます 、 jQuery が HTML ファ イル に 読み 込ま れる よう に 設定 し ます 。head 要 素 の 
title 要素 の すべ あと に 、 次 の 1 行 を 書き 加え て くだ さい 。 


「 <!DOCTYPE htm1> 
, く htm] 1ang="]a"> 
く <head> 
<meta charset="utf-8"> 

<tit1e> プロ グラ ム 実 行 テ スト </tit1e> 
1 <Script src="]query.]S "></script> 
| </head> 


っ へ O の の 6 OO MO 一 


これ で HTML ファ イル が ブラ ウザ に 読み 込ま れ た と き に 、 同 時 に jQuery の ファ イル 
も 読み 込ま れ ま す 。 

HTML ファ イル に JavaScript の ソー スコ ー ド を 直接 記述 する 場合 は 、 jQuery 読み 
込み の 行 よ り も あと に 別途 script 要素 を 作り 、 そ の 中 に 記述 し て くだ さい 。 

も し 、JavaScript の 外部 ファ イル (js) を 読み 込む 場合 も 、 読 み 込む た め の soript 
要素 は 、jQuery 読 み 込 み の 行 より も あと に 書い て くだ さい 。 


く Script src="]query.]S "></ Script> 
<script src="sample.]s"></script> // 外部 JS ファ イル の 読み 込み 
く Script> 
// ここ に 処理 を 記述 する 
</script> 





Day 








Lesson 
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人 
Lesson 、Lesson4 


. jQuery の 記述 方 法 


4 JQuery で ソー スコ ー ド を 書く 方 法 を 説明 し ます 。 


SECTION 





@」Query の ソー スコ ー ド を 書く に は ? 


jQuery の 基本 的 な 操作 は 、2 段 階 の 手順 を と り ま す 。 


①HTML の 要素 を 取得 する 
② 取 得 し た 要素 を 操作 する 


この 2 つの 手順 を 、 次 の よう に 1 行 で 書く の が も っ と も 基本 的 な 書き 方 で す 。 
専 構文 : jQuery の 基本 的 な 書き 方 


$( 取得 し た い 要 素 ) . メソッド 名 (引数 1 引数 2, ...): 





取得 され た 要素 は 、 jQuery オブ ジェ クト と いう 種類 の オブ ジェ クト に な り ま す 。 
jQuery オブ ジェ クト に は 、 い ろ い ろ な メソ ッ ド が 用 意 さ れ て いま す 。 


@ 取 得 し た い 要 素 の 指定 方 法 


「 取 得 し た い 要 素 ] を 指定 する に は 、CSS セレ クタ を 使い ます 。 よ く 使 われ る CSS 


セレ クタ は 以下 の 3 種類 で す 。 
セレ クタ 名 取得 で きる 要素 書き 方 
タイ プ セ レク タ 指定 し た 要素 ' 要素 名 
クラ ス セ レク タ 指定 し た class 属性 値 を 持つ 要素 '.class 属性 値 
ID セレ クタ 指定 し た id 属性 値 を 持つ 要素 #id 属性 値 
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Day 





以下 の よう な ソー スコ ー ド を 例 に 、 具 体 的 に 説明 し ます 。 





, <!DOCTYPE htm1> Lesson 


1 

2 I <htm] 1ang="]a"> 4 
3 <head> 

人 く <meta charset="ut 和 f†-8"> 

5 ! <tit1e> プロ グラ ム 実 行 テス ト </tit1e> WW 
6 <Script src="]query・.]S "></Script> 放 
の く SCPipt> | 5 
8 ! // ここ に jQuery の ソー スコ ー ド を 記述 する の 
9 ! </script> ご 
10 ' </head> の 
11 : <body> < 
12 ! <h1> ブログ ラム 実 行 テス ト </h1> の 
13 <p 1d="top"> 第 1 段落 </p> 記 
fd * <p cl1ass="contents"> 第 2 段落 </p> 述 
15 <p 1d="bottom"> 第 3 段落 </p> 方 
16 </body> 法 
17 ! </htm1> ^ 


タイ プ セ レク タ を 使っ て 、h1 要素 (12 行 目 ) を 取得 する に は 、8 行 目 に この よう に 書 
きま す 。 


9! CR: 
次 に 、 ク ラス セレ クタ を 使っ て 2 番目 の 要素 (14 行 目 ) を 取得 する に は 、 こ の よう 
に 書き ます 。 


8 $('.contents' ) : 


最後 に 、ID セ レク タタ を 使っ て 1 番目 の p 要 素 (13 行 目 ) を 取得 する に は 、 こ の よう に 
書き ます 。 


8 ! $('Wtop')j 
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mw4 CSS() メソ ッ ド で 
4 要素 の 色 を 変え る 


SECTION 





jQuery オブ ジェ クト の css() メソ ッ ド を 使っ て 、 要 素 の 色 を 変 
1 える 方 法 を 説明 し ます 。 
人 @ 要素 の 色 を 変え る に は ? 


前 の セク ショ ン で は 、 た だ jQuery オブ ジェ クト と し て 取得 し た だ け な の で 、 ブ ラウ 
ザ 画 面 上 で は 何 の 変化 も あり ませ ん 。 jQuery オブ ジェ クト の css() メソ ッ ド と いう も 
の を 使っ て 、 取 得 し た h1 要素 の 色 を 赤 に 変え て こみ ま し ょ う 。 

CsS() メ ソ ッ ド で 要素 の 色 を 変え る に は 、 こ の よう に 書き ます 。 

再 構文 : CsS() メソ ッ ド 


$( セレ クタ ) .css('co1or',。 ' 色 ") 


先ほど 取得 し た h1 要素 の 色 を 赤 に 変え る に は 、 こ の よう に 書き ます 。 


8 ! $("h1') .css('co1or'。 'red'): 


これ で 実行 し て みる と 、 h1 要素 の 色 が 赤 に 変わ る …… か と 思い き や 、 黒 の まま に な っ 
て いる か こと 加 いま す 。 読み 込ん だ 要素 に 対し て 何ら か の 操作 を 加え る に は 、 じ つ は も う 
1 つ 書 か な けれ ば な ら な いこ と が あり ます 。 そ れ が $(function() 人 }) で す 。 


@ $(function() け ) の 使い 方 


前 の レッ スン で 、 イ ベン ト ハ ンド ラ を 実行 する に は 、HTML 文書 が すべ て 読み 込み 
終わ る の を 待っ て か ら で な いと きち ん と 動作 し な い の で 、window.onload イ ベン ト を 
使 つ 方 法 を 説明 し まし た 。 

]Query に も 同じ 問題 が あり ます 。HTML 文書 が すべ て 読み 込み 終わ っ て か ら で な い 
と 、 有 要素 の 取得 が で き な い の で 、 jQuery の 操作 が 実行 され な い の で す 。 


lv = ニニ ーー 





jQuery で は 、$(function()1}) と いう 書き 方 を 使い ます 。 
専 $(function())) の 構文 


$(function() { 
Query の 処理 


}): 





jQuery の 処理 は 、 こ の 構文 の 中 カッ コ 1() の 中 に 書き ます 。 こ うす る こと で 、HTML 
文書 の 読み 込み が 完了 し て か ら 、 jQuery の 処理 が 実行 され る よう に な り ま す 。 先ほど 
の jQuery は 、 以 下 の よ うに 書き ます 。 


8 「 $(function() { 
9 『: $("h1').css('color',。 "red'): 
10 ! )) ぅ 


カッ コ の 数 が 多い の で 、 書 き 間 違い 、 書 き 忘 れ を し な い 
よう に 気 を つけ て くだ さい 。 


これ を 実行 する と 、h1 要素 の 色 が 赤 に 変わ り ま す 。 


円 プロ グラ ム 庄 行 テス ト  x h1 要素 の 色 が 変更 され た 
e G fle:///C:/Users/ITO%20S マ > 三 
プロ グラ ム 実 行 テス ト 


第 1 段 座 
第 2 段落 





色 を 指定 する 第 2 引数 は 、16 進 数 の カラ ー コ ー ド を 使 
つて 書い て も 大 丈夫 で す 。 た と えば 、 赤 な ら #ff0000 と 
な り ま す 。 








@ 
の 
に 
コ 
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4 html() メソ ッ ド で 
4 鞭 素 の 中 身 を 変え る 


SECTION 





jQuery オブ ジェ クト の html() メソ ッ ド を 使っ て 、 要 素 の 中 身 
9 を 変え る 方 法 を 説明 し ます 。 
人 @ 要素 の 中 身 を 変え る に は ? 


取得 し た 要素 の 中 身 を 変え る に は 、html() メソッド を 使い ます 。html() メソ ッ ド は 
この よう に 書き ます 。 
芝 構文 : htmlO0 メソ ッ ド 


$( セレ クタ ) .htm1( ' 変更 後 の HTML ' ) 


先ほど と 同じ サン プル プロ グラ ム で 、ID セレ クタ (#top) を 使っ て 1 番目 の p 要 素 を 
取得 し 、h2 要素 に 変更 し て み ま し ょ う 。 こ ご の よう に 書き ます 。 


8 ( $(function( ) { 
9 , 。 $('#top').htm1('<h2> 見 出し </h2>"): 
10 ! 1): 


プロ グラ ム を 実行 し て みて 、 最 初 の p 要 素 (第 1 段落 ) が h2 要素 の 「 見 出し 」 に 変わ っ 
て いれ ば 成功 で す 。 


円 プロ グラ ム 夷 行 テ スト x p 要素 が h2 要素 に 変更 され た 
G 口 fle:///C:/Users/ITO%20S マ > 


プロ グラ ム 実 行 テ スト 


見 出し 
第 2 際 
第 3 際 座 











ーー 


so4 fdeOut() メソ ッ ド で 
人 4 アニ メー ショ ン 効 果 


ド ] コ *3 | 


Lesson 


jQuery オブ ジェ クト の fadeOut() メソ ッ ド を 使っ て 、 要 素 が 
7 フェ ー ド アウ ト し て 見 えな く な る よう に する アニ メー ショ ン 効 果 
の 書き 方 を 説明 し ます 。 





@@ 要素 を フェ ー ド アウ ト さ せる に は ? 


取得 し た 要素 が フェ ー ド アウ ト し て 見 えな く な る よう な アニ メー ショ ン に する に は 、 
fadeOut() メソ ッ ド を 使い ます 。fadeOut() メソ ッ ド は この よう に 書き ます 。 
再 構文 : fadeOut() メソ ッ ド 


$( セレ クタ ) .fadeOut( ) 


先ほど と 同じ サン プル プロ グラ ム で 、h1 要素 を 取得 し 、 フ ェ ー ド アウ ト さ せる に は 、 
この よう に 書き ます 。 


8 ! $(function() { 
9 $( 'h1') .fadeOut( ) : 
10 ! }): 


プロ グラ ム を 実行 し て 、h1 要素 が フェ ー ド アウ ト し て 見 えな く な れ は ば 成功 で す 。 


円 プロ グラ ム 座 行 テ スト x h1 要素 が フェ ー ド アウ ト す る 
っ で 口 fle:///C:/Users/ITO%20S マ > 三 


間 ロマ ー メ IINI テ マメ 01nOspej 区 | よい 


fadeOut() メ ソ ッ ド の 「O] は 大 文字 で す 。 小 文 
字 で 書く こと エラ ー に な っ て 実行 され ませ ん 。 ま た 、 
カッ コ の 中 に 数 値 (ミリ 秒 単位 ) を 書く と 、 見 え 
な く な る まで の 時 間 を 指定 する こと が で きま す 。 
初期 値 は 400 (ミリ 秒 ) で す 。 
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-esn4 。 双 ソ ッ ド を 繋げ て 書く 
mA メソ ッ ド チェ ー ン 


1 jQuery オブ ジェ クト の メソ ッ ド を 複数 書く と き の 書 き 方 を 説明 






し ます 。 


メソ ッ ド を 複数 設定 する に は ? 


1 つの jQuery オブ ジェ クト に 複数 の メソ ッ ド を 指定 する と き に は 、 メ ソ ッ ド を ピリ 
オド () で 繋げ て 書き ます 。 こ の 書き 方 を メソ ッ ド チェ ー ン と いい ます 。 
専 構文 : メソ ッ ド チェ ー ン の 書き 方 





先ほど と 同じ サン プル プロ グラ ム で 、h1 要素 を 取得 し 、 い っ た ん フェ ー ド アウ ト さ 
せ て か ら フ ェ ー ド イン させ て み ま し ょ う 。 フ ェ ー ド イン させ る に は 、 fadelIn() メ ソ ッ 
ド を 使い ます 。 


8 ( $(function( ) { 
9 $( 'h1') .fade0ut( ) .fadeTn( ) : 
10 : }): 


プロ グラ ム を 実行 し こみ て くだ さい 。h1 要素 が いつ た ん フェ ー ド アウ ト し て 見 えな 
く な っ て か ら 、 フ ェ ー ド イン し て 表示 され れ ば 成功 で す 。 メ ソ ッ ド が た くさ ん 繋が る と 、 
1 行 が 長く な っ て 、 ソ ー ス コー ド が 分 か り に くく な る こと が あり ます 。 そ ん な と き は 、 
メソ ッ ド の 前 で 改行 し て 、 そ れ ぞ れ イ ン デ ント する と 見 や すく な り ま す 。 


8 ! $(function() { 


9 !  $(Ch4') 
10 ・fade0ut( ) 
夫 店 ・fadeTn( ) 


12 ! 1 
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ーー 


Lesson 4 イベ ン ト 処 理 を 














設定 する 4 
SECTION 4 
click イベ ント を 例 に し て 、 jQuery を 使っ た イベ ント 娘 理 の 書 
き 方 を 説明 し ます 。 9 | 
@ イ ベン ト と イベ ント ハン ドラ を 関連 付け る に は ? べ 
/ 
jQuery で も イベ ント と イベ ント ハン ドラ を 関連 付け る 処理 を 書く へ こと が で きま す 。 ト 
琶 構文: イベ ント と イベ ント ハン ドラ の 関連 付け 処 
$( セレ クタ ) . イベ ント 名 (function() { 和 
イベ ント ハン ドラ 設 
}) 定 
また カッ コ を た くさ ん 使い ます の で 、 書 こく と き に は 気 を つけ て くだ さい 。 る 
た と えば 、h1 要素 が クリ ッ ク さ れ た ら 、 イ ベン ト ハ ンド ラ が 実行 され る よう な お 処理 
を 書い て み ま し ょ う 。 イ ベン ト ハ ンド ラ は 、 前 の セク ショ ン で 使っ た h1 要素 の 色 を 赤 
に 変え る 処理 に し て み ま す 。soript 要 素 の 中 に 、 こ の よう に 書き ます 。 
8 ! $(function(){ 
9 $('h1') .c1ick(function( ) { 
10 $ あ (NN)aeSsi( eoloP。 hed.)5 
4 4 5 
2 5 
実行 し て みて くだ さい 。 表 示さ れ た h1 要素 を クリ ッ ク し て 、 赤 に 変わ れ ば 成功 で す 。 
MEMO 
イベ ント ハン ドラ は jQuery で な く て も OK で す 。 た と えば 、alert() メ ソ ッ ド の 処理 を 書け ば 、 
クリ ッ ク す る と 警告 ダイ アロ グ ボ ックス が 表示 され ます 。 
に 
ル 
Ms1 71 


3psy E 症 証 3 
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